Как показать / скрыть элемент array.map () на основе щелчка внутри компонента - PullRequest
Новая
       15

Как показать / скрыть элемент array.map () на основе щелчка внутри компонента

0 голосов
/ 12 апреля 2020

Я хочу показать / скрыть часть JSX в зависимости от свойства P_Gamestate. Если это происходит, мы будем показывать только тот компонент, на который нажали. Остальное все остальное должно быть скрыто. Это сложно, поскольку .map() относится ко всем элементам в плейлистах. Как мне этого добиться? В настоящее время он будет скрывать компонент, на котором я нажал, но все остальное будет отображаться.

испытания. js: 

export default function Challenges()
{
    const [P_gameState, P_setGameState] = useState(GAME_STATE.BEFORE);

    useEffect(() => {
        async function getPlaylists() {
           let querySnapshot =  await firestoreRef
            .collection('challenge_test')
            .get();
            querySnapshot.forEach(function(data) {
                playlist.push([useful data]);
            });
        }
        getPlaylists();

    },[]);
    return(
        <div>
            <header>
                {console.log("rendering component...")}
                {playlist.map((row)=> (

                        <CardComponent key={row[0]}
                                       name={row[0]}
                                       image={row[1]}
                                       creator={row[2]}
                                       challengeID={row[3]}
                                       P_gameState={P_gameState}
                        />
                )
                )
}         
        </div>
    );
}

карточный компонент. js

function CardComponent(props) {
    const [gameState, setGameState] = useState(GAME_STATE.BEFORE);

    const onClick = () => {
        console.log(props.history);
        props.history.push("/playchallenge");
    };
    return (
        <div>
        { gameState === GAME_STATE.BEFORE &&
        <div className='card-component'>
            <Button onClick={() => setGameState(GAME_STATE.IN_PROGRESS)}>
                <img
                    className="playlist-image"
                    src={props.image}
                    alt={props.name} />
            </Button>
            <h3 className='playlist-title'>{props.name}</h3>
            <h4 className='playlist-creator-text'>Created by {props.creator}</h4>
        </div>
    }
     { gameState === GAME_STATE.IN_PROGRESS &&   <FetchData />}
</div>

    )
}

1 Ответ

0 голосов
/ 12 апреля 2020

Если вы хотите сделать условный рендеринг в JSX, у вас есть несколько методов:

  1. Ветвление внутри функции map обратного вызова 
array.map(item => {
  if (!condition) {
    return null;
  }
  return <Component {...props} />;
});
Ветвление внутри функции рендеринга компонента (аналогично методу 1) Вызов array.filter перед map (каждый раз будет создаваться новая копия отфильтрованного массива) Inline Если с логическим оператором && 
array.map(item => condition && <Component {...props} />);
Встроенный If с условным (троичным) оператором 
array.map(item => condition? <Component {...props} />: <SomethingElse />);

===========

Если вы хотите, чтобы условие было обновлено некоторыми событие происходит во внутренних компонентах, используйте событие prop 

<CardComponent onClick={() => { /* do something with your game state */ }} />
...