Why my if statement is not working while the condition is true?

I am trying to create dynamic fields based on my selected attributes. I have 2 array objects addAttributes and fakeAttributes. fakeAttributes are the details of selected attributes. I have a dropdown select component if I pass the addAttributes it will show the data. If I select any option from my select component it will store into the setAttributes state.

Live code: https://codesandbox.io/s/summer-cloud-m0bvn?file=/src/App.js:1247-1678

 const [attributes, setAttributes] = useState([{ label: '', value: 1 }])

    const addAttributes = [
        { label: 'colors', value: 1 },
        { label: 'size', value: 2 },
    ]

    // Attributes data
     const fakeAttributes = [{
        label: 'colors',
        object: [
            { label: 'Black', value: 1 },
            { label: 'Green', value: 2 },
        ]
    },
    {
        label: 'size',
        object: [
            { label: 'M', value: 1 },
            { label: 'S', value: 2 },
        ]
    }
    ]

Dropdown UI. I am using npm i react-select package for the dropdown. This is my code where I am trying to filter and map those array objects if the value matches with the label it will show a text but the output is not showing also I did not get any error. The condition is matching.

<div className='flex flex-row gap-6'>
        <div className="basis-1/4">

            <label className="block text-sm font-medium text-gray-700 mb-3"> Size </label>
            <Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"  isMulti />

        </div>
         {fakeAttributes.map((attr) => {
          attributes.filter((list) => {
            console.log(typeof attr.label,":",attr.label,typeof list.label,":",list.label);
            if (list.label === attr.label) {
              console.log("ok I am in");
              return <h2>Output</h2>;
            }
          });
        })}

    </div>

Can any one please help me? How can I solve it?

Answer

Your return statement is in the scope of the filter block. So you are returning the html as the boolean of the filter method which will always be true. And then when the filtering is done, you dont do anything with the filtered items.

If you want to return the filtered item, you have to first end the filter block, then find the item and return it.

See this:

import { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [attributes, setAttributes] = useState([{ label: "", value: 1 }]);
  // Data need to break and store label info in another variable and add value dynamically
  const addAttributes = [
    { label: "colors", value: 1 },
    { label: "size", value: 2 }
  ];

  // Attributes data
  const fakeAttributes = [
    {
      label: "colors",
      object: [
        { label: "Black", value: 1 },
        { label: "Green", value: 2 }
      ]
    },
    {
      label: "size",
      object: [
        { label: "M", value: 1 },
        { label: "S", value: 2 }
      ]
    }
  ];
  return (
    <div className="App">
      <div className="flex flex-row gap-6">
        <div className="basis-1/4">
          <label className="block text-sm font-medium text-gray-700 mb-3">
            {" "}
            Size{" "}
          </label>
          <Select
            onChange={(e) => setAttributes(e)}
            className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            options={addAttributes}
            isMulti
          />
        </div>

        {fakeAttributes.map((attr) => {
          const item = attributes.filter((list) => {
            return list.label === attr.label;
          })[0];
         if (item) { 
          console.log("ok I am in");
          return <h2>Output</h2>;
        }
        })}
      </div>
    </div>
  );
}