Блог

У меня есть этот компонент класса Field.jsx (фрагмент):

 render() {
...
<div className="field-row"> 

   {this.getPlayersByPosition(players, 5).map((player,i) => (
      <Position
        key={i} 
        className={fullScreen ? "full-screen-player" : "player"}
        getPositionData={this.getPositionData}
        toggleFullScreen={this.toggleFullScreen.bind(this)}
        fullScreen={this.state.fullScreen}
      >{player.name}</Position>
    ))} 
</div>
...
  

{

И мне нужно передать условие рендеринга. Условие должно быть:

При рендеринге я Field хочу показывать только имя игрока.

Когда я нажимаю, и toggleFullScreen это происходит, тогда я показываю все данные.

Это то, что я пытаюсь:

Position.jsx

 export const Position = props => {

    const { matches, mean, goals} = props.getPositionData(props.children);

    return (

        <div

           {props.fullScreen amp;amp; 
            <p>Name: {props.children}</p>   // condition 
          }

            className={props.className}
            onClick={() => {
                props.getPositionData(props.children);
                props.toggleFullScreen();
            }}
        >
            <p>Name: {props.children}</p>
            <p>Goals: {goals}</p>
            <p>Mean: {mean}</p>
            <p>Matches: {matches}</p>
        </div>
    )
}
  

Но я получаю ошибку:

       Line 13:10:  Parsing error: Unexpected token, expected "..."

  11 |         <div
  12 | 
> 13 |         {props.fullScreen amp;amp; 
     |          ^
  14 |      <p>Name: {props.children}</p>
  15 |          }
  16 | 
  

Чего мне не хватает?

 {props.fullScreen amp;amp; 
  <p>Name: {props.children}</p>   // condition 
}
  

Эти строки появляются в середине a <div> , где вы должны указывать реквизиты div. Вам нужно будет переместить его вниз, чтобы он был дочерним элементом div.

 <div
 className={props.className}
 onClick={() => {
     props.getPositionData(props.children);
     props.toggleFullScreen();
 }}
>
 {props.fullScreen amp;amp; (
   <p>Name: {props.children}</p>
 )}
 <p>Goals: {goals}</p>
 <p>Mean: {mean}</p>
 <p>Matches: {matches}</p>
</div>