How to call function in child component from parent component

Question

I want to call function showExtraBlogposts() in Blogpostreader.js when clicking on the button rendered in Blog.js

I have tried to call it with onClick={Blogpostreader.showExtraBlogposts()} which gives back that showExtraBlogposts() is not a function of Blogpostreader...

import React from 'react';
import axios from 'axios';
import Blogpost from './Blogpost.js';

class BlogpostReader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      blogposts: [],
      blogpostAmount: "",
      counter: 1,
      renderedBlogposts: []
    };
  }

  componentDidMount() {
    //API call
  }

  renderBlogpost(i) {
    // Single blogpost rendered
  }

  showExtraBlogposts() {
    for(this.state.counter; this.state.counter < (this.state.blogpostAmount + 2); this.state.counter++) {
      this.state.renderedBlogposts.push(
        <div key={this.state.blogposts[this.state.counter].id} className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 whole-blogpost">
          {this.renderBlogpost(this.state.blogposts[this.state.counter])}
        </div>)
    }
    this.forceUpdate();
  }

  render() {
    this.state.blogpostAmount = this.state.blogposts.length;
    for (this.state.counter; this.state.counter < this.state.blogpostAmount && this.state.counter < 5; this.state.counter++) {
      this.state.renderedBlogposts.push(
        <div key={this.state.blogposts[this.state.counter].id} className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 whole-blogpost">
          {this.renderBlogpost(this.state.blogposts[this.state.counter])}
        </div>)
    }
    return this.state.renderedBlogposts;
  }
}

export default BlogpostReader;

My Blog component looks like this:

import React from 'react';
import BlogpostReader from './BlogpostReader.js';
import BlogpostWriter from './BlogpostWriter.js';

class Blog extends React.Component {  
  render() {
    return (
      <div className="row">
        <div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div className="wrap">
            <BlogpostWriter className="blogpost-writer"/>
          </div>
        </div>
        <div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div className="wrap">
            <div className="row">
              <BlogpostReader />
            </div>
            <div className="centered-button">
              <button className="styled-button">Meer laden</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}


export default Blog;

How do I resolve this issue?

EDIT I have modified the components so that BlogpostReader renders the button. Than I should be able to call the showExtraBlogposts() method, but it keeps giving me an error, because my app runs the method even without clicking the button... How can I resolve this issue?

Answer 1

You can't really call child methods from parent components. The "react way" to do this is in the parent component store a boolean in state to keep track of if it should be shown, then pass that boolean into the child through the child's props.

Answer 2

Use Callbacks to pass data, using child function in parent is not the option in reactjs,

How to pass data from child component to its parent in ReactJS?

Answer 3

React is based on the idea of one way data binding, which means that the parent keeps track of state and passes down state and functions through props. Which means that the parent component cannot call functions from children component, to do so you'll need to use other libraries like Redux.