How can I take my onClick output and put it on a card?-CodePudding

If I have a console output from here:


const PeriodicTable = () => {
  
  
  return (
    <div layout className="periodic-table">
      {data.elements.map((element) => (
        <button
          className="element"
          key={element.name}
          onClick={()=> {console.log(element)}}
          style={{
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: colorMap[element.category],
          }}

So when I click on an element on the periodic table the console.log(element) is an output of element data from a JSON file. All I want is to take the output and print it out onto a html tag. I've already tried the document.write() method but to no avail.

CodePudding user response：

perhaps you can pass that value from button to the state on parent components, and just pass it to Card Component

let's say you have json like this

const data = {
  elements: [
    {
      name: "steve",
      ypos: 1,
      xpos: 1,
      color: "red"
    },
    {
      name: "james",
      ypos: 2,
      xpos: 2,
      color: "red"
    }
  ]
};

and PeriodicTabel will look like this

const PeriodicTable = (props) => {
  return (
    <div className="periodic-table">
      {data.elements.map((element, id) => (
        <button
          key={id}
          className="element"
          onClick={() => props.handleOnCLick(element)}
          style={{
            width: "100px",
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: element.color
          }}
        >
          click me
        </button>
      ))}
    </div>
  );
};

then in app component you can make handleOnclick to make it as props on PeridocTable component

export default function App() {
  const [val, setVal] = useState({});
  const handleOnCLick = (val) => {
    setVal(val);
  };

  return (
    <div className="App">
      <PeriodicTable handleOnCLick={handleOnCLick} />
      <Card value={val} />
    </div>
  );
}

so in app component you can make a state to accept value from the button on PeriodicTable component

const [val, setVal] = useState({});

and then you can pass it to the card

 <Card value={val} />

Card component will be look like this

const Card = (props) => {
  return (
    <div
      className="card"
      style={{
        width: "200px",
        background: "red",
        height: "250px",
        margin: "0 auto"
      }}
    >
      <h2>title card</h2>
      <p>{props.value.name}</p>
    </div>
  );
};

this is final result of the source code

import { useState } from "react";
import "./styles.css";

const data = {
  elements: [
    {
      name: "steve",
      ypos: 1,
      xpos: 1,
      color: "red"
    },
    {
      name: "james",
      ypos: 2,
      xpos: 2,
      color: "red"
    }
  ]
};

const Card = (props) => {
  return (
    <div
      className="card"
      style={{
        width: "200px",
        background: "red",
        height: "250px",
        margin: "0 auto"
      }}
    >
      <h2>title card</h2>
      <p>{props.value.name}</p>
    </div>
  );
};

const PeriodicTable = (props) => {
  return (
    <div className="periodic-table">
      {data.elements.map((element, id) => (
        <button
          key={id}
          className="element"
          onClick={() => props.handleOnCLick(element)}
          style={{
            width: "100px",
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: element.color
          }}
        >
          click me
        </button>
      ))}
    </div>
  );
};

export default function App() {
  const [val, setVal] = useState({});
  const handleOnCLick = (val) => {
    setVal(val);
  };

  return (
    <div className="App">
      <PeriodicTable handleOnCLick={handleOnCLick} />
      <Card value={val} />
    </div>
  );
}

link to the preview in codesandbox