Update component with data from parent in React

Question

In my react app I have this child component that inherits data from its parent. However, it does not update the page with new data from the child component when a relevant anchor link is clicked.

Here's my build - https://suite-search-lk.surge.sh/result/369523

From the link above if you click on a suggested card h1 element it just updates the URL with the id but does not update the page with the relevant card data from that id.

Any idea how I can fix this? Do I have to force the component to re-update?

Parent component (Card Wrapper)

class CardWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stories: []
    };
  }
  componentDidMount() {
    axios
      .get(API)
      // .then(response => console.log(response))
      // get our stories array, check it and then change state to contain our stories
      .then(data => {
        let stories;
        if (data.data.stories && data.data.stories) {
          if (Array.isArray(data.data.stories)) {
            stories = data.data.stories;
          } else {
            stories = [data.data.stories];
          }
        } else {
          stories = [];
        }
        this.setState({
          stories: stories
        });
      });
  }
  render() {
    return (
      <CardWrapperDiv>
        <div className="headingWrapper">
          <div className="heading"> Suggested for you</div>
        </div>
        <Cards>
          {this.state.stories.map(story => {
            return (
              <Card
                title={story.content.title}
                img={story.content.img}
                description={story.content.description}
                deadline={story.content.deadline_date}
                tags={story.content.tags}
                key={story.id}
                id={story.id}
              />
            );
          })}
        </Cards>
      </CardWrapperDiv>
    );
  }
}

export default CardWrapper;

Child component

class Card extends React.Component {
  render() {
    return (
      <CardDiv>
        <div className="cardbox">
          <div className="cardDetails">
            <div className="headlineText">
              <Link to={`/result/${this.props.id}`}> {this.props.title} </Link>
            </div>
            <div className="headlineSub">Colombo, Sri Lanka</div>
            <div className="headlineDes">{this.props.description}</div>
            <div className="textRemain">
              {" "}
              Deadline date: {this.props.deadline}
            </div>
            <div className="buttonRow">
              <button className="downloadBtn">Download</button>
              <button className="viewBtn">View</button>
            </div>
          </div>
          <div className="cardimgwrapper">
            <div className="cardimg">
              <img src={this.props.img} alt="some title" />
            </div>
          </div>
        </div>
      </CardDiv>
    );
  }
}

export default Card;

score 0 · Answer 1 · answered Oct 30 '18 at 10:05

Sorry it seems I have figured this out using the following post - Can you force a React component to rerender without calling setState?

Although I'm not exactly sure if it's the best way to go about it.

Essentially I used an OnClick listener to run a function and forces a re-render of the entire component.

Hope this can help someone else :)

class Card extends React.Component {
  handleButtonClick() {
    this.forceUpdate();
  }
  render() {
    return (
      <CardDiv>
        <div className="cardbox">
          <div className="cardDetails">
            <div className="headlineText">
              <Link to={`/result/${this.props.id}`} onClick={this.handleButtonClick}> {this.props.title} </Link>
            </div>
            <div className="headlineSub">Colombo, Sri Lanka</div>
            <div className="headlineDes">{this.props.description}</div>
            <div className="textRemain">
              {" "}
              Deadline date: {this.props.deadline}
            </div>
            <div className="buttonRow">
              <button className="downloadBtn">Download</button>
              <button className="viewBtn">View</button>
            </div>
          </div>
          <div className="cardimgwrapper">
            <div className="cardimg">
              <img src={this.props.img} alt="some title" />
            </div>
          </div>
        </div>
      </CardDiv>
    );
  }
}

export default Card;

score 0 · Answer 2 · answered Oct 30 '18 at 10:24

0

U have to use ur child component as a pure component. PureComponent Update when ur props change.

class Card extends React.PureComponent {

  handleButtonClick() {
    this.forceUpdate();
  }

  render() {
    return (
      <CardDiv>
        .....
        .....
      </CardDiv>
    );
  }
}

export default Card;

answered Oct 30 '18 at 10:24

Asif vora

3,163
3
15
31

using an OnClick listener on my child component actually end up breaking my route when I build my app and deploy it (the route returns a 404). Any idea why this would happen? – Christiaan Quyn Oct 30 '18 at 11:39
show your routes code for better understand why that's happen – Asif vora Oct 30 '18 at 11:44
Here's the anchor on my child linking to another child. ` {this.state.title} ` Here are what my routes look like on my app.js - https://github.com/Christianq010/gov_jobs_react-app/blob/master/src/App.js – Christiaan Quyn Oct 30 '18 at 11:55
I haven't found ur git repo and why u have to use `onClick={this.handleButtonClick}` ? – Asif vora Oct 30 '18 at 11:58
The idea was to run a function upon clicking the Link? – Christiaan Quyn Oct 30 '18 at 12:06
That's bad way when u click the link change the route so have to do that thing render route. – Asif vora Oct 30 '18 at 12:09
How do you suggest I handle it instead? :) – Christiaan Quyn Oct 30 '18 at 12:20

Update component with data from parent in React

2 Answers2