Pass submited data from one component to another

For my react Dapp, I need to send the data submited from one component to another one (where the function which need the data is located).

So I want to send the data submited on the form located in Master.jsx to App.js (createKit):

Master.jsx:

class Master extends Component {
  handleInputChange = (event) => {
    let input = event.target;
    let name = event.target.name;
    let value = input.value;
    this.setState({
      [name]: value
    });
  };
  render() {
    return (
      <Fragment>
        <form className="addForm">
            <span>Barcode:</span>
            <input name="barcode" 
                    className="barcorde" 
                   type="number" 
                   onChange={this.handleInputChange}/>
            <span>Owner</span>
            <input name="owner" 
                    className="owner" 
                   type="text"        
                   onChange={this.handleInputChange}/>
            <span>Inventory</span>
            <input name="inventory" 
                   className="inventory" 
                   type="text" 
                   onChange={this.handleInputChange}/>
          <button type="submit" value="submit">Add kit</button>
        </form>
      </Fragment>
    );
  }
}
export default withRouter(Master);

App.js:

class App extends Component {
  state = {barcode: null, owner: "", inventory: ""};

  createKit = (event) => {
    event.preventDefault();
    const cBarcode = this.state.barcode;
    const cOwner = this.state.owner;
    const cInventory = this.state.inventory;
    console.log(cBarcode, cOwner, cInventory);
  };
  render() {
    return (
      <div className="App">
    <Router>
      <Switch>
        <Route path="/login">
          <Login />
        </Route>
        <ProtectedRoute path="/home">
          <Dashboard />
        </ProtectedRoute>
        <Route exact path="/">
          <Redirect exact from="/" to="home" />
        </Route>
        <Route path="*">
          <Redirect from="/" to="home" />
        </Route>
      </Switch>
    </Router>
      </div>
    );
  }
}
export default App;
export const createKit = (event) => {
  event.preventDefault();
  const cBarcode = this.state.barcode;
  const cOwner = this.state.owner;
  const cInventory = this.state.inventory;
  console.log(cBarcode, cOwner, cInventory);
};

I also created a sandbox of my code: https://codesandbox.io/s/react-login-auth-forked-53ht1

I have tried to look at some answer of people asking the same things but I couldn’t make it work. So I would like to ask some help please.

I thank in advance anyone who will take the time to help.

Hello there,

Here is one problem:

 state = { barcode: null, owner: "", inventory: "" };

A general class component in React with state follows this boilerplate:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
    this.myMethod = this.myMethod.bind(this); // Depends how/where you use the method whether this is necessary
  }
...
}

Hope this helps.

1 Like

@Sky020 I tried but it also didn’t work :confused: .
I did the change on this new sandbox: https://codesandbox.io/s/react-login-auth-forked-ebf6k

Why did you change this:

const cBarcode = this.props.state.barcode;
    const cOwner = this.props.state.owner;
    const cInventory = this.props.state.inventory;

I would highly recommend you go over the React docs, and/or go through the React section of the freeCodeCamp curriculum: https://www.freecodecamp.org/learn/front-end-libraries/react/

Peruse through it, if you are not interested in diving deep into a tutorial/lesson, but get an idea of the general React methodology. If you get stuck along the way, feel free to use the Ask for Help button on any lesson, and we can help you out.

1 Like
  1. Pass the createKit method down as a prop and use it in the child (you need to pass it through the Dashboard component).

  2. The Master component does not have a state object.

  3. For the createKit method in App, it is not this.props.state, the component does not get any props passed to it. You can pass the form state you set in Master to the createKit method (you passed down) as arguments and use them in App.

1 Like

@lasjorg

  1. Pass the createKit method down as a prop and use it in the child (you need to pass it through the Dashboard component).

Ok for that I have changed createKit from an arrow function to a normal one and I binded it. Then I passed it down as createKit={this.createKit} inside the Dashboard component.

<Dashboard createKit={this.createKit} />

  1. The Master component does not have a state object.

Here I added the state object to the Master component like that:

class Master extends Component {
  constructor(props) {
    super(props);
    this.state = {
      barcode: null,
      owner: "",
      inventory: ""
    };
  }
...
}
  1. For the createKit method in App, it is not this.props.state , the component does not get any props passed to it. You can pass the form state you set in Master to the createKit method (you passed down) as arguments and use them in App.

First I followed your and @Sky020 's advice and changed my create app by deleting the props. from it. So there should be no problem.

Then in the Dashboard component I passed down to the Master component the function by doing the following:
<Master onSubmit={this.props.createKit} />

Finally I used this function inside the Master component by writting:
<form className="addForm" onSubmit={this.props.createKit}>

But I think I made an error for this last part.

I updated the sandbox: https://codesandbox.io/s/react-login-auth-forked-ebf6k

  1. You need to change the createKit method so it can accept arguments and pass the state from Master to the method.

App

createKit(event, barcode, owner, inventory) {
  event.preventDefault();
  console.log(barcode, owner, inventory);
}

Master

<form className="addForm" onSubmit={(event) => this.props.createKit(event, this.state.barcode, this.state.owner, this.state.inventory)}>
  1. In the Dashboard component keep the prop the same as in App (createKit and not onSubmit)
<Master createKit={this.props.createKit} />

I see, thanks a lot for the help :smiley: !