How to render specific cards that depend on a state inside a Dropdown component?

Question

React

In the project I use react-easy-state.

const state = store({
  // CARDS
  media: [
    {
      id: 1,
      title: 'Заголовок,
      desc:
        'Описание.',
      type: 'new',
    },
  ],
});

I have a Dropdown component which is a custom select. Now the code looks like this

function Dropdown() {
  const [visible, setVisible] = useState(false);
  const [list, setList] = useState({
    selected: 'new',
    list: ['new', 'popular'],
  });
  return (
    <div className="dropdown">
      <button
        className="dropdown__triggers btn"
        onClick={() => {
          setVisible(!visible);
        }}>
        {list.selected}
        <svg
          className={visible ? 'svg rotate180' : 'svg'}
          width="8"
          height="5"
          viewBox="0 0 8 5"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 3.05719L6.86193 0.195262C7.12228 -0.0650874 7.54439 -0.0650874 7.80474 0.195262C8.06509 0.455612 8.06509 0.877722 7.80474 1.13807L4.4714 4.4714C4.21105 4.73175 3.78895 4.73175 3.5286 4.4714L0.195262 1.13807C-0.0650874 0.877722 -0.0650874 0.455612 0.195262 0.195262C0.455612 -0.0650874 0.877722 -0.0650874 1.13807 0.195262L4 3.05719Z"
            fill="#92929D"
          />
        </svg>
      </button>
      {visible && (
        <div className="dropdown__block">
          <ul className="dropdown__items">
            {list.list.map((item) => {
              return (
                <li
                  className="dropdown__item"
                  onClick={() => {
                    setList({
                      ...list,
                      selected: item,
                    });
                    setVisible(false);
                  }}>
                  {item}
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}

there is also a Cards component

Cards() {
  return (
    <div className="media-cards">
      {state.media.length > 0 ? (
        state.media.map((item, index) => {
          // console.log()
          return <Card data={item} />;
        })
      ) : (
        <span>Нет данных</span>
      )}
    </div>
  );
}

The card component accepts props.

I want to emphasize that Dropdown is used in several pages and in each of its contents of the lists.
Question: How, by changing "selected" in the Dropdown component, did the Cards component redraw the content by selecting from the state media in the assoc array with the desired type? Is it correct that I store the content of the list locally?

Answer 1

Throw an array of selected properties into Cards, for example it will be called selected, then in Cards filter by it:

state.media
.filter(el => selected.includes(el))
.map((item, index) => {
          // console.log()
          return <Card data={item} />;
        })