How to pass props from the React-table to another screen

Question

I created two screens, one has a table using the React-table component that has three columns: code, group and edit button for each row. The other screen has a box with two text boxes where, when clicking the edit button I go to the edit screen and I want the text boxes to render the code and the group name of that line where I clicked. I can already print on the console the specific code and group of each line separately by clicking on the button but I don’t know how I take them to another screen and present them inside the text box in the rendering, how can I do this?

And I pull the code name and group like this:

Cell: (props)=> (
             <Link to='EditarGrupo'><button className='modaleditar btn btn-info'
                    onClick={() => {
                      const nome_cdgrupo = props.original.Cdgrupo;
                      const nome_grupo = props.original.Grupos;

                         console.log("Código:", nome_cdgrupo);
                         console.log("Grupo:", nome_grupo);

                      }}>

                      Editar

                      </button>
                      </Link> 

I want to send the name_group and name_cdgroup to these inputs on another screen:

<input type='text'  className='Cdgrupo_edit' defaultValue={this.props.Cdgrupo} onChange={this.handleChangeCdgrupo}></input>
 <input type='text' className='Grupos' defaultValue={this.state.Grupo} onChange={this.handleChangeGrupos}></input>

Table information comes from an api, in JSON.

These are the images of how the table is created and the box, where I want to take the code and group to these text boxes, each a different screen:

Answer 1

You must create a component for your Edit button and thereby pass the values as props. The component <Editar/> will be responsible for rendering inputs, while in the table cell you will replace everything with the component tag and pass the values of the Group and Cdgroup as props, so:

Cell: (props)=> (<Editar Grupo={props.original.Grupo} CdGrupo={props.original.Cdgrupo}/>)

I simulated the Edit buttons rendering the inputs that receive the props in this link: https://react-gzazty.stackblitz.io, but basically its code is an abstraction of what you put right into the table cell:

import React from 'react';

const Editar = (props) => {
  const {
    Cdgrupo,
    Grupo
  } = props;

  return (
    <>
    <input type='text' defaultValue={Cdgrupo}></input>
    <input type='text' defaultValue={Grupos}></input>
    </>
  );
};

export default Editar;

I noticed by the class that you are using a modal. You can also implement a modal behavior using the package https://www.npmjs.com/package/react-modal. Using this package, you will have to stop using the Link and render the content directly on top of the table. Take a look and see if it’s worth it for you.

I hope I’ve helped.