使用反应钩子将所选项目显示到另一个组件

Question

I have a section in which contains templates, now I want a user to select one of the templates and edit the data in templates eg name, job title, contact etc.

Here is my live demo in code sandbox editor live demo

Here is templates.js

export default function Templates() {
  const [selected, setSelected] = useState("");
  let history = useHistory();

  const handleSelected = (e) => {
    const value = e.target.innerHTML;
    setSelected(value);
   history.push('/Settings') 
  };


  return (
    <div className="App">
      <h2>Select one of the Template below by clicking title</h2>

    <div className={`template_one ${selected === "Template_one" ? "selected" : "unselected"}`} onClick={(e) => {setSelected(selected !== "Template_one" ? "Template_one" : ""); handleSelected(e);}}>
        <h1>Template_one</h1>
        <table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Job</th>
              <th>Facebook</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <th>Developer</th>
              <td>facebook/Mark</td>
            </tr>
          </tbody>
        </table>
   
      </div>

      <div className={`template_two  ${selected === "Template_two" ? "selected" : "unselected"}`} onClick={(e) => {setSelected(selected !== "Template_two" ? "Template_two" : "");handleSelected(e);}}>
        <h1>Template_two</h1>

        <table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Job</th>
              <th>Company</th>
              <th>Contact </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Trump</td>
              <th>President</th>
              <td>Trump Organization</td>
              <td>+1 728 256 345</td>
            </tr>
          </tbody>
        </table>
       
      </div>
    </div>
  );
}

And here is settings.js

import React from "react";

export default function Settings() {
  return (
    <div>
      <h1>Settings</h1>
      <div className="Settings">
        <form>
          Name: <input type="text" name="firstname" />
          Job: <input type="text" name="job" /> <br /> 
          Facebook: <input type="text" name="facebook" /> 
          Company: <input type="text" name="company" />  
          Contact: <input type="text" name="contact" /> 
        </form>
        <div className="selected-template">
          Here should be the selected template
        </div>
      </div>
    </div>
  );
}

Expected result:

Problem: I don't know how to display the selected templates in the settings component.

How do I copy the selected template to the settings component so that the user can edit the selected template.?

Answer 1

I don't know why but someone deleted my other post that's why I'm seeing your message now. If you want to make different styles you can add classnames to your data. Also if you want, you can look at this libary: https://material-ui.com/styles/basics/ it is so populer around react users. You can basicly make all styles in javascript with this libary. If you gonna use this libary you can add all jss in your data. here is example:

 const table1= { root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', height: 48, padding: '0 30px', }, }; Data=[ { name:'something', style:table1 }, { age:22, style:table2 } ]

and basic explanation about how to use this styles

 import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; function Table() { const classes = props.data.style(); return <Table className={classes.root}>Your table here</Table>; } export default withStyles(props.data.style)(Table);