How to pass the search query to table filter between different JS files?

Question

I have a datagrid table in which I'm getting my database data from an API call and I have written the table code in one file. I also have a search functionality where you can search for a particular record inside the table, but this search code is in another file. I am having difficulty of passing my state variable containing the search parameter from my search file to the table file. I have separated all my components in different pages since it'd be easier to structure them using a grid in my App.js. How do I get my search query to my table file next?

My search code:

export default function SearchInput() {
  const [searchTerm, setSearchTerm] = React.useState('');

  return (
    <Grid item xs={3}>
        <Box mt={1.6}
            component="form"
            sx={{
                '& > :not(style)': { m: 1, width: '20ch', backgroundColor: "white", borderRadius: 1},
            }}
            noValidate
            autoComplete="off"
        >
        <TextField 
          placeholder="Search Customer ID" 
          variant="outlined" 
          size="small" 
          sx={{input: {textAlign: "left"}}} 
          onChange={(event) => {
            setSearchTerm(event.target.value);
            console.log(searchTerm);
          }}
        />
        </Box>
    </Grid>
  );
}

My table code:

export default function DataTable() {
  const [pageSize, setPageSize] = React.useState(10);
  
  const [data, setData] = React.useState([]);
  useEffect(async () => {
    setData(await getData());
  }, [])


    return (
      <div style={{ width: '100%' }}>
        <DataGrid
            rows={data}
            columns={columns}
            checkboxSelection={true}
            autoHeight={true}
            density='compact'
            rowHeight='40'
            headerHeight={80}
            disableColumnMenu={true}
            disableSelectionOnClick={true}
            sx={datagridSx}

            pageSize={pageSize}
            onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
            rowsPerPageOptions={[5, 10, 15]}
            pagination
        />
      </div>
    );
  }

App.js

function App() {
  return (
    <div className="App">
      <Container maxWidth="false" disableGutters="true">
        <Grid container spacing={0}>
          <ABClogo />
          <HHHlogo />
        </Grid>
        <Grid container spacing={0}>
          <LeftButtonGroup />
          <SearchInput />
          <RightButtonGroup />
        </Grid>
        <Grid container spacing={0}>
          <DataTable />
          <TableFooter />
        </Grid>
      </Container>
    </div>
  );
}

Answer 1

Here is a minimal example using createContext(), and useReducer() to lift up state and share it between components, similar to what you are after, but as jsNoob says, there are multiple options. This is one I'm comfortable with.

The concept is explained here: https://reactjs.org/docs/context.html

Essentially you can create 'global' state at any point in your component tree and using Provider / Consumer components, share that state and functionality with child components.

//Main.js

import React, { createContext, useContext, useReducer } from 'react';

const MainContext = createContext();

export const useMainContext => {
    return useContext(MainContext);
}

const mainReducer = (state, action) => {
    switch(action.type){
        case: 'SOMETHING':{
            return({...state, something: action.data});
        }
        default:
            return state;
    }
}

export const Main = () => {
    const [mainState, mainDispatch] = useReducer(mainReducer, {something: false});
    const stateOfMain = { mainState, mainDispatch };
    
    return(
        <MainContext.Provider value={stateOfMain}>
            <MainContext.Consumer>
                {() => (
                    <div>
                        <Nothing />
                        <Whatever />
                    </div>
                )}
            </MainContext.Consumer>
        </MainContext.Provider>
    )
}

Then you can have the other components use either or both of the main state and dispatch.

//Nothing.js
import {mainContext} from './Main.js'

const Nothing = () => {
    const { mainState, mainDispatch } = useMainContext();
    
    return(
        <button onClick={() => {mainDispatch({type: 'SOMETHING', data: !mainState.something})}}></button>
    )
}

Clicking the button in the above file, should change the display of the below file

//Whatever.js
import {mainContext} from './Main.js'

const Whatever = () => {
    const { mainState } = useMainContext();
    
    return(
        <div>{mainState.something}</div>
    );
}