React Lifting State Up using Ancestor

Question

I am attempting to share state between two components I have made. Based on my research I believe I will need to lift state up to an ancestor component and then trickle that state down to the other components. For reference, I have added a file uploader that will receive a json file, then I will have a logic file loop through json and then that data will be rendered into a table with the new values.

https://reactjs.org/docs/lifting-state-up.html

I am confused on how to share the state between these components and appreciate any critique.

FileUploader.js

import React, { useCallback, useState } from 'react'
import { useDropzone } from 'react-dropzone'
import RoombaClean from './Roomba'

const style = {
  margin: '10% 30% 10% 30%',
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  padding: '30px',
  borderWidth: 1,
  borderRadius: '20px',
  borderColor: '#bdbdbd',
  borderStyle: 'dashed',
  backgroundColor: '#eeeeee',
  color: '#bdbdbd',
  outline: 'none',
  transition: 'border .24s ease-in-out',
};

function FileUploader() {

  const [state, setState] = useState("");

  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload  = () => {
        const inputJson =
          JSON.parse(reader.result)

        console.log(inputJson)
        setState(inputJson);
        //apply logic to transform json

      }

      reader.readAsText(file)
    })

  }, [])
  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} value={state}/>
      <p>Drag files here, or click to browse</p>
    </div>
  )
}


export default FileUploader;

Ancestor.js

import React, { useState } from 'react'
import FileUploader from './FileUploader'
import Table from './Table'

function Ancestor() {
    const [state, setState] = useState('');
    return <>
      <FileUploader state={state} />
      <Table state={state} />
    </>;
  }

export default Ancestor;

Table.js

import React from 'react'

function Table() {
  return (
    <div>
      <table className="table">
        <thead>
        <tr>
          <th>Step</th>
          <th>Roomba Location</th>
          <th>Action</th>
          <th>Total Dirt Collected</th>
          <th>Total Wall Hits</th>
        </tr>
        </thead>
        <tbody>
            {
            }
        </tbody>
      </table>
      <h4>Final Position: {}</h4>
      <h4>Total Dirt Collected: {}</h4>
      <h4>Total Distance Traveled: {}</h4>
      <h4>Total Walls Hit: {}</h4>
    </div>
  )
}

export default Table

Answer 1

import React, { useState } from 'react'
import FileUploader from './FileUploader'
import Table from './Table'

const Ancestor = () => {
    const [products, setProducts] = useState({});
    return <>
      <FileUploader productState={products} setProductState={setProducts} />
      <Table productState={products} />
    </>;
  }

export default Ancestor;

function FileUploader({ productState, setProductState }) {

  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()
      reader.onload  = () => {
        const inputJson =
          JSON.parse(reader.result)
        setProductState(inputJson); // Here's where the magic happens
      }
      reader.readAsText(file)
    })

  }, [])
  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} value={productState}/>
      <p>Drag files here, or click to browse</p>
    </div>
  )
}

function Table({ productState }) {
  return (
    <div>
      <table className="table">
        <thead>
        <tr>
          <th>Step</th>
          <th>Roomba Location</th>
          <th>Action</th>
          <th>Total Dirt Collected</th>
          <th>Total Wall Hits</th>
        </tr>
        </thead>
        <tbody>
            
          {/* Use the productState here */}
            
        </tbody>
      </table>
      <h4>Final Position: {}</h4>
      <h4>Total Dirt Collected: {}</h4>
      <h4>Total Distance Traveled: {}</h4>
      <h4>Total Walls Hit: {}</h4>
    </div>
  )
}

1. Replace your state and setState in the children (FileUpload.js and Table.js) with props 'productState' and 'setProductState'.

2. Declare useState in the Parent Component (Ancestor.js)

3. Pass state and setState declared in the Parent Component (products, setProducts) to the children via the props declared in step 1.

4. Use the passed setState in the FileUpload.js to change the state.

5. Changes propagate across the parent and the children.

Note: You can achieve the same with useContext hook, which will let you reuse the states across the app independent of Parent, child relationship.

Note: You can also use a state management library like Redux to create a centralized store where all your different states are stored, which can be used across the app. Preferred solution for medium to large scale apps.