CODEWITHSUNDEEP
javascriptreactjs
m00saca
m00saca

Reputation: 363

Change state of components to reflect selected page ReactJS

I am trying to update the state or props of child components of a larger component <Navigation /> in order to reflect what is being displayed on my website.

That's the big picture and I thought it would be really easy but it's not. Here is my code:

// This is the parent component 
var Navigation = React.createClass({
    
  getInitialState: function(){
    var endpoints = require("./data/naviEnd.js");
    return {
      endpoints: endpoints
    }             
  },

  renderEndpoints: function(key){
    var endpointDetails = this.state.endpoints[key];
    return(
      <NavEndpt activeRoute={this.props.activeRoute} toggleState={this.toggleState} id={endpointDetails.id} key={endpointDetails.title} url={endpointDetails.url} title={endpointDetails.title}/>
    )
    
  },

  render: function() {
    return(
        <div id="navigation">
            {Object.keys(this.state.endpoints).map(this.renderEndpoints)}
        </div>
    )
  }
});

// this is the child component that renders the div and links contained inside
var NavEndpt = React.createClass({

  handleClick: function() {

  },

  render: function() {

    return(
      <div id={this.props.id}>
        <Link className={this.props.active} onClick={this.handleClick} id={this.props.id + "-link"} to={this.props.url}>{this.props.title}</Link>
      </div>
    )
  }
})

I have been experimenting with a whole bunch of ways to update state and pass information down with props and nothing works. My <Navigation /> component doesn't have a this.props.children and I thought it would since there are two child components <NavEndpt />. The React Docs are not very helpful. What can I try next?

Upvotes: 0

Views: 1118

Answers (1)

Ben Hare
Ben Hare

Reputation: 4415

So I guess I'd start by asking why you think Navigation should have this.props.children - I know it has two children, but it isn't passed them as props. It is creating them. It would receive a children props if it was invoked like this:

<Navigation>
  <div>This is a child!</div>
</Navigation>

The div there would be passed in as a prop called "children".

Now if you're trying to change the state of Navigation and have it pass some of that information down to the NavEndpt, you could set up something like this:

var Navigation = React.createClass({

  getInitialState: function() {
    var endpoints = require("./data/naviEnd.js");
    return {
      endpoints: endpoints
    }             
  },

  changeEndpoints: function() {
    // Get new endpoints somehow
    this.setState({endpoints: newEndpoints});
  }

  render: function() {
    return(
      <div id="navigation">
        <NavEndpt endpoints={this.state.endpoints} />
      </div>
    )
  }
});

This would then cause the NavEndpt to receive new props, which are the current endpoints in the Navigation state, whenever they're updated (as I have in my dumb function there that represents some on click or ajax request or whatever that gets new endpoints).

Upvotes: 1

Related Questions