Passing state data from one component to Another In React

Question

I have two components, one for getting JSON data from two input fields and the other one for displaying the gathered data and using it for different purposes. After getting the data from JSON files, I have set them to the state of the first component.

My problem is how can I send the data obtained in the first component which is set as the state to the other component so that I can show the data in the form of a table in the second component.

First Component:

export class comp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uploadfile1:null,
            uploadfile2:null
        }
        this.readFile = this.readFile.bind(this);
       
    }

    readFile(e) {

        {/*Reading JSON Files*/}

        const file = e.target;
        const fileId = file.id;

        if (/\.(json)$/i.test(file.files[0].name) === false) {
            alert("Not valid JSON file!");
        } 
        else {
            const fileReader = new FileReader();
            fileReader.readAsText(file.files[0], "UTF-8");

            fileReader.onload = () => {
                console.log(fileReader.result);
                const data = JSON.parse(fileReader.result);
              
                this.setState({
                    ['upload' + fileId]: data
                })
            };
        } 
    }
    
    render() {
        return (
            <div className="new-audit-content-wrapper">
               
                <input onChange={this.readFile} type="file" id="file1" className="inputfile"/>
                <label htmlFor="file1">Browse for files</label>

                <input onChange={this.readFile} type="file" id="file2" className="inputfile"/>
                <label htmlFor="file2">Browse for files</label>
                          
            </div>
        )
    }
}

Second Component;

export class table extends Component {
    render() {
        return (
            <div className="wrapper">
                       
                        <thead className="table-head">
                            <tr className="table-head-cols">
                                <th className="col-1">Seq#</th>
                                <th className="col-2">Data Audit Row #</th>
                            </tr>
                        </thead>

                        <tbody className="table-body">
                            <tr className="table-body-cols">
                                <td className="table-body-col-1">1</td>
                                <td className="table-body-col-2">3</td>
                            </tr>
                            
                        </tbody>
                         
            </div>
        )
    }
}

Ijust have to pass the data from the first components state to the second component using Props? I do not know the exact solution as I am new to react.

Thanks

Answer 1

You will need to pass in the data as props and include the "Second Component" as a child of the "First Component".

render() {
        return (
            <div className="new-audit-content-wrapper">
               
                <input onChange={this.readFile} type="file" id="file1" className="inputfile"/>
                <label htmlFor="file1">Browse for files</label>

                <input onChange={this.readFile} type="file" id="file2" className="inputfile"/>
                <label htmlFor="file2">Browse for files</label>
                
                {/* Add the table below, similar to the example */}
                <Table data={this.state.uploadFile1} />
                     
            </div>
        )
    }

I don't know if you were following an example but you've intuitively walked (or started to walk..) into a pattern: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0