reactjs - Filter an array of objects using "includes" when mapping through array

Question

I have an array of objects like so:

const buttonTypes = [
    {
      linkType: "default",
      icon: <LinkFilledIcon stroke={"white"} />,
    },
    {
      linkType: "twitter",
      icon: <TwitterOutlineIcon height={22} fill={"white"} />,
     
    },
    {
      linkType: "music",
      icon: <MusicOutlineIcon stroke={"white"} />,
    },
}

Now I want to use includes to filter for music when I map through the array like so:

buttonTypes.map((button, index) => {
                  console.log(button.linkType.includes(query));
                  return (
                    <div className="drop-down-option" key={index}>
                      <button
                        className="option__button"
                        onClick={(e) => {
                          props.setLinkType(button.linkType);
                          setLinkTypeDropdown(!linkTypeDropdown);
                          goToDashboard();
                        }}
                      >
                        <div className="inner__buttonContainer">
                          <div className="inner__iconContainer">
                            {button.icon}
                          </div>
                          <div className="inner__textContainer">
                            <h4>{button.title}</h4>
                          </div>
                        </div>
                      </button>{" "}
                    </div>
                  );
                })}

Any idea how I can filter the array?

question from:https://stackoverflow.com/questions/65940868/filter-an-array-of-objects-using-includes-when-mapping-through-array

Answer 1

first of all, you have a mistake in the closing the tag for the button array,

you can filter array like that

const buttonTypes = [
    {
      linkType: "default",
      icon: "hi",
    },
    {
      linkType: "twitter",
      icon:1,
     
    },
    {
      linkType: "music",
      icon: 2,
    },
]


buttonTypes.filter((ele) => {
    return ele.icon != 1 
}).map((ele) => {
    console.log(ele)
})