call another component to render in react.js

Question

http://codepen.io/anon/pen/KNEzOX?editors=0010

I have component A that does the fetch and render the list. I have component B that accept the user input. How do I fire component A from component B? I guess my structure is wrong.

const Profiles = React.createClass({
  getInitialState(){
    return {profiles: []}
    if(!this.props.username){
      return false;
    }
    fetch('https://api.github.com/search/users?q=' + this.props.username)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        this.setState({profile: json.items})
      })
  },
  render(){
    return (
      <ul>
        {
          this.state.profiles.map(profile => 
            <li key={profile.id}>profile.name</li>
          )
        }
      </ul>
    )
  }
})

const Input = React.createClass({
    getInitialState(){
      return {username:''}
    },
    handleInputChange(e){
      this.setState({username:e.target.value})
    },
    handleSearch(){
      if(!this.state.username){
        alert('username cannot be empty');
        return false;
      }
      //call profile component and pass username to it?
    },
    render() {
        return(
          <div>
            <input type="text" placeholder="github username" onChange={this.handleInputChange} value={this.state.username} />
            <button onClick={this.handleSearch}>Search</button>
            <Profiles username={this.state.username} />
          </div>
        )
    }
});

Scimonster · Accepted Answer · 2016-12-20 13:54:27Z

1

First off:

getInitialState(){
    return {profiles: []}
    if(!this.props.username){
      return false;
    }
    fetch('https://api.github.com/search/users?q=' + this.props.username)

Fetch will never get executed here because of the return. Put the return at the end.

Second, what you need here is for it to fetch when the component receives new props. What i would do is add a new method to the class that will fetch, and call it both from getInitialState and componentWillReceiveProps. So:

  getInitialState(){
    if(!this.props.username){
      return false;
    }
    this._fetchData();
    return {profiles: []}
  },
  componentWillReceiveProps(){
    this._fetchData();
  },
  _fetchData(){
    fetch('https://api.github.com/search/users?q=' + this.props.username)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        this.setState({profile: json.items})
      })
  },

The issue is that the component already exists, so getInitialState doesn't get called. It just has to update itself.

edited Dec 20, 2016 at 13:54

answered Dec 20, 2016 at 13:46

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jamie Anderson Over a year ago

I got your first point, fixed that. But I don't understand your second one. I don't know how to call profiles component from input component.

Jamie Anderson Over a year ago

I think my structure is wrong. I should not do fetch in component A, just do fetch within the click handler, then pass the result as prop to component B which will do the render.

Scimonster Over a year ago

That's another way you could do it.

Collectives™ on Stack Overflow

call another component to render in react.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related