Как рендерить определенные карточки, которые зависят от стэйта внутри компонента Dropdown?

Question

[gomerIT]

В проекте использую react-easy-state.

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

У меня есть компонент Dropdown - это кастомный select. Сейчас код выглядит примерно так

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>
	);
}

так же есть компонент Cards

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

Компонент Сard принимает props.

Хочу подчеркнуть, что Dropdown используется в нескольких страницах и в каждом своt содержимое списков.
Вопрос: Как меняя "selected" в компоненте Dropdown, компонент Cards перерисовывал содержимое выбирая из state media в assoc массиве с нужным type? Правильно ли что я храню содержимое списка локально?

Answer 1

[EastJesus]

Прокидывайте в Cards массив выбранных свойств, например он будет называться selected, затем в Cards фильтруйте по нему:

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