使用道具将对象从一个组件传递到另一个组件

Question

I am trying to pass a whole object from one component to another on button click.

I have tried using Link and Router, but I still cannot see the object inside the props of the destination component.

I am using the onClick handler handleReportIncident to pass an available object while Routing to this component. The handleReportIncident function is bound at the top.

    handleReportIncident() {
        const { trip } = this.state;
        this.props.history.push(`/app/new`)
        return (
            <div>
                <New trip={trip} />
            </div>
        )
    }

    render() {

        return (

                    <Button
                        variant="contained"
                        color="primary"
                        className={classes.toolbarButton}
                        onClick={this.handleReportIncident}
                    >
                        <AddIcon />
                        Incident
        </ Button>
)}

Inside of New component I have :

class New extends Component {
render() {
const {trip} = this.props;
console.log("the trip is", trip);
return(
...
)
}
New.propTypes = {
    trip: PropTypes.object.isRequired,
};

Note: I am using material UI as a theme.

The Log inside the New component is the trip is undefined .

Answer 1

You can wrap your desired object in the state of the Link. See example below.

// Main Component from which you want object passed

render() {

  return (
    <Link to = {{
      pathname: '/app/new',
      state: {
        trip: this.state.trip
      }
    }}>
      <AddIcon /> Incident 
    </Link>
  )
}

// New Component get desired object from this.props.location.state

class New extends Component {
render() {
const { trip } = this.props.location.state
console.log("the trip is", trip);
return(
...
)
}
New.propTypes = {
    trip: PropTypes.object.isRequired,
}

For more info on how it works head over to this tutorial: https://tylermcginnis.com/react-router-pass-props-to-link/