How to pass props onClick in React

Question

I have list of Events that I call using axios.get and map them to an Event component. Inside the Event component I have a button which opens a Registration Component. I'm trying to find a way to pass this.props.title on the React Router Link component.

Events.js

import React from 'react';
import Event from './Event';
var axios = require('axios');

var Events = React.createClass({
     getInitialState: function() {
    return {
        events: [], 
    }
  },
  componentDidMount: function() {
    var _this = this;
      axios.get("MY JSON URL")
        .then(function(result) {
          _this.setState({
            events: result.data
          });
        })
        .catch(function(error) {
            console.log(error);
        })
  },
    componentWillUnmount: function() {
        this.unmounted = true;
  },
    render: function() {
        return (
            <div>
                {this.state.events.map(function(event, key) {
                    return (
                        <div key={key}>
                            <Event 
                                title={event.EventTitle}
                              />
                        </div>
                    ) 
                })}
            </div>
        )
    }
});

export default Events;

Event.js import React from 'react';

var Event = React.createClass({
render: function() {
return (
  <div className="ui-outer">
    <Link to="/register/event" title={this.props.title} />
  </div>
)}})
export default Event;

RegisterForm.js

import React from 'react';
var RegisterForm = React.createClass({
 <h1>{this.props.title}</h1>
 <form></form>
})
export default RegisterForm;

once you follow a <Link> you are going to a different page so the only way in which you can send something directly to that component is through the url (param or query). I assume you don't want to do that, so the only solution would be to keep some sort of state outside your react components, either in a flux way or in a top level component which is not unmounted when you navigate. — Alex Moldovan
– Alex Moldovan, Commented Dec 9, 2016 at 21:16

Paul S · Accepted Answer · 2016-12-10 00:08:10Z

You can pass information through a <Link> two ways: through the URI or as state.

Through the URI, you can either include information in the pathname (using a param) or as part of the search string (or query object).

// props.title through the pathname
<Link to={{
  pathname: `/register/event/${this.props.title}`
}}>{this.props.title}</Link>

In your component, you would access this through this.props.location.pathname.

// props.title through the search
<Link to={{
  pathname: '/register/event',
  search: `?title=${this.props.title}`
}}>{this.props.title}</Link>
// props.title through the query
<Link to={{
  pathname: '/register/event',
  query: { title: this.props.title }
}}>{this.props.title}</Link>

In your component, you would access both of these through this.props.location.query.title.

The benefit of including the title in the URI is that you can give someone a direct link to the page and they will have the title included.

The other way that you can pass information through a <Link> is using the location's state property. This allows you to pass "hidden" information through the <Link>. The downside of this is that the extra information will not be available to someone who navigates directly to the URL.

// props.title through the state
<Link to={{
  pathname: '/register/event',
  state: { title: this.props.title }
}}>{this.props.title}</Link>

Collectives™ on Stack Overflow

How to pass props onClick in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related