ReactJS - passe les clés et les valeurs d'objet comme accessoires à div

Question

Dans mon composant de classe Field.jsx render(), je développe mon <Position>composant en utilisant <Flipper>, (une animation de retournement abstraite), comme ceci:

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

---

Lorsque je le rend, j'obtiens des éléments cliquables à partir de la fonction mappée getPlayersByPosition(), comme ceci:

---

Et si je clique sur chaque élément, il se développe en un div avec le nom du joueur:

Qui est passé en tant que props.children au composant <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(), cependant, retourne un objet avec de nombreux éléments à son tour, comme vu par la console ci-dessus:

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

---

QUESTION :

Comment puis-je transmettre et imprimer ces autres clés et valeurs d'accessoires sur le violet étendu divsous forme de texte?, Afin de terminer par :

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

---

REMARQUE:

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

On dirait que les accessoires sont tous installés et prêts à être imprimés comme on le voit sur votre console. Vous pouvez y accéder via props.getPositionData(props.children).property_name_hereou les déstructurer

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

Concernant le problème sur l' fullScreenaccessoire (voir la section commentaires):

Existe-t-il un moyen de les imprimer UNIQUEMENT après toggleFullScreen ()

Puisque vous avez déjà un état sur le Fieldcomposant qui contient votre fullScreenvaleur, sur votre Fieldcomposant, vous devez également transmettre l' fullScreenaccessoire au Positioncomposant. par exemple fullScreen={this.state.fullScreen}. De retour sur le Positioncomposant, ayez des instructions de condition lors du rendu.

Exemple:

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