ReactJS - passa chaves de objetos e valores como adereços para div

Question

Em meu componente de classe Field.jsx render(), estou expandindo meu <Position>componente usando <Flipper>, (uma animação flip abstrata), assim:

import { Flipper, Flipped } from 'react-flip-toolkit'
import { Position } from "./Position";
import "./css/Position.css";

class Field extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fullScreen: false,
    };
  }

toggleFullScreen() {
    this.setState({ fullScreen: !this.state.fullScreen });
  }
...

render() {
    const { players } = this.props;
    const { fullScreen } = this.state;
    if(players){
      return (
       <div className="back">
         
          <div className="field-wrapper" >
            <Output output={this.props.strategy} />

            <Flipper flipKey={fullScreen}>
              <Flipped flipId="player">

                <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)}
                      >{player.name}</Position>
                    ))} 
                </div>

              </Flipped>
            </Flipper>

          </div>
        </div>
      );

  }else{
    return null}
  }

---

Quando eu o renderizo, obtenho itens clicáveis ​​da função mapeada getPlayersByPosition(), assim:

---

E se eu clicar em cada item, ele se expandirá para um div com o nome do jogador:

Que é passado como props.children no componente <div>

---

Position.jsx

import React from "react";
import "./css/Position.css";


export const Position = props => (
  <div
    className={props.className}
    onClick={() => {
        props.getPositionData(props.children);
        props.toggleFullScreen();
        console.log(props.getPositionData(props.children))
    }}
  >
    {props.children}
  </div>
);

---

getPositionData(), no entanto, retorna um objeto com muitos itens em sua vez, conforme visto pelo console acima:

{matches: 7, mean: 6.15, price: 9.46, value: 0.67, G: 3, …}

---

PERGUNTA :

Como faço para passar e imprimir essas outras chaves e valores de adereços no roxo expandido divcomo texto ?, de modo a terminar com :

Patrick de Paula
matches: 7
mean: 6.15
price:9.46
....

---

NOTA:

Position.css

.position-wrapper {
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: lighter;
  font-size: 1.4em;
  color: #888888;
  flex: 1;
  /*outline: 1px solid #888888;*/
}


.player {
  height: 4em;
  width: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: lighter;
  font-size: 1.4em;
  /*background-color: #66CD00;*/
  color: #ffffff;
}

.full-screen-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-image: linear-gradient(
    45deg,
    rgb(121, 113, 234),
    rgb(97, 71, 182)
  );
}

Answer 1

Parece que os adereços estão todos configurados e prontos para serem impressos, conforme vistos em seu console. Você pode acessá-los props.getPositionData(props.children).property_name_hereou destruí-los

export const Position = props => {

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

    return (
        <div
            className={props.className}
            onClick={() => {
                props.getPositionData(props.children);
                props.toggleFullScreen();
                console.log(props.getPositionData(props.children))
            }}
        >
            <p>Name: {props.children}</p>
            <p>Matches: {matches}</p>
            <p>Mean: {mean}</p>
            <p>Price: {price}</p>
        </div>
    )
}

Com relação ao problema no fullScreenadereço (ver seção de comentários):

Existe uma maneira de imprimi-los SOMENTE após toggleFullScreen ()

Como você já tem um estado no Fieldcomponente que mantém seu fullScreenvalor, no seu Fieldcomponente, você precisa passar a fullScreenprop também para o Positioncomponente. por exemplo fullScreen={this.state.fullScreen},. De volta ao Positioncomponente, tenha algumas declarações de condição quando estiver renderizando.

Exemplo:

<>
  {props.fullScreen && 
    <p>Name: {props.children}</p>
  }
</>