Question 220633 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to pass value to another file?

How to pass value of ‘row‘ to EditRecord (child file)? Once I’m on EditRecord page, the props (record) of the parent’s file’s gone.

Parent File:

const [record, setRecord] = React.useState({});

return ( 
  <TableBody>
          {stableSort(props.data, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map((row, index) => (   
                <TableRow 
                    className={(classes.tableAltenativeColor, classes.tableRow)}
                    key={index}
                >  
                    <TableCell style={{verticalAlign: 'top'}}>                                                                                                                                  
                          <Button                            
                            onClick={() => {setRecord(JSON.stringify(row))}}
                            href={`${config.home}edit`} 
                            >                  
                              <EditNoteOutlined 
                                color={"primary"}                                            
                              />                                                          
                          </Button>  
                       <EditRecord record={record}/>
                    </TableCell>  
             ))}                  
    </TableBody>
 )
Tags:

2

Answers


  1. 0

    To pass the value of ‘row’ to the EditRecord component and ensure that it persists even when you navigate to the EditRecord page, you need to manage the state at a higher level in your application. This typically involves using React Router to handle navigation and storing the row data in a state management solution like Redux or React Context.

    Here’s a general outline of how you can achieve this:

    1. Set up React Router to handle navigation between pages in your application.
    2. Store the row data in a global state management solution like Redux or React Context.
    3. Pass the necessary data from the global state to the EditRecord component as props.
    4. When you navigate to the EditRecord page, retrieve the necessary data from the global state and pass it as props to the EditRecord component.

    Here’s a step-by-step example using React Context:

    1. Set up React Router in your application:
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ParentComponent from './ParentComponent';
import EditRecord from './EditRecord';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ParentComponent} />
        <Route path="/edit" component={EditRecord} />
      </Switch>
    </Router>
  );
};

export default App;
    1. Create a context to manage the global state (for simplicity, let’s call it RecordContext):
    import React, { createContext, useState } from 'react';

const RecordContext = createContext();

const RecordProvider = ({ children }) => {
  const [record, setRecord] = useState({});

  return (
    <RecordContext.Provider value={{ record, setRecord }}>
      {children}
    </RecordContext.Provider>
  );
};

export { RecordContext, RecordProvider };
    1. Wrap your App component with the RecordProvider to make the context available throughout the application:
    import React from 'react';
import { RecordProvider } from './RecordContext';
import App from './App';

const Root = () => {
  return (
    <RecordProvider>
      <App />
    </RecordProvider>
  );
};

export default Root;
    1. In the parent component (ParentComponent), use the RecordContext to set the row data in the global state:
    import React, { useContext } from 'react';
import { RecordContext } from './RecordContext';

const ParentComponent = (props) => {
  const { setRecord } = useContext(RecordContext);

  // ... your code to retrieve 'row' data

  const handleEditButtonClick = (row) => {
    setRecord(row);
    // Navigate to the EditRecord page using React Router
    props.history.push('/edit');
  };

  // ... rest of your component code
};
    1. In the EditRecord component, retrieve the data from the global state using the RecordContext:
    import React, { useContext } from 'react';
import { RecordContext } from './RecordContext';

const EditRecord = () => {
  const { record } = useContext(RecordContext);

  // Use 'record' data in the EditRecord component
  // ... your code to render and edit the record data
};

    By using React Context, you can store the row data in the global state, making it accessible to all components in your application, including the EditRecord component. This way, the data will persist even when you navigate to the EditRecord page.

    Login or Signup to reply.
  2. 0

    One way to handle this is to pass the row data as a parameter in the URL, and then extract it in the child component (EditRecord). However, this is limited as you cannot pass complex objects like row in the URL directly.

    A better way would be to use a state management library such as Redux or React’s Context API to store global state that can be accessed from any component in your app. Here’s a simplified version of how you could use Context API:

    // Create a context
const RecordContext = React.createContext();

// Parent Component
function ParentComponent() {
  const [record, setRecord] = React.useState({});

  return (
    <RecordContext.Provider value={{ record, setRecord }}>
      ...
      <Button onClick={() => setRecord(row)}>Edit</Button>
      <EditRecord />
      ...
    </RecordContext.Provider>
  )
}

// Child Component
function EditRecord() {
  const { record } = React.useContext(RecordContext);

  React.useEffect(() => {
    // You can use 'record' here
    console.log(record);
  }, [record]);

  return (...);
}

    With this, both ParentComponent and EditRecord have access to the same record state and the setRecord function. You can use record inside EditRecord and it will always reflect the latest value set in the parent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search