How to pass parameter into React component defined using ES6 class

Question

Consider this simple Blog component defined in ES6 class way:

 import React from "react"; import ReactDOM from "react-dom"; class Blog extends React.Component { Sidebar(props) { return ( <ul> {props.posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } posts = [ { id: 1, title: "Hello World", content: "Welcome to learning React!" }, { id: 2, title: "Installation", content: "You can install React from npm." } ]; render() { return ( <this.Sidebar posts={this.posts} /> ); } } ReactDOM.render(<Blog />, document.getElementById("root")); export default Blog;

When I want to pass variable posts to Sidebar props I can write

<this.Sidebar posts={this.posts} />

in render method.

However, if I export the Blog component and import it like this (variable posts is removed from the Blog component):

 import React from 'react'; import ReactDOM from 'react-dom'; import Blog from './Blog' const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning React!" }, { id: 2, title: "Installation", content: "You can install React from npm." } ]; ReactDOM.render(<Blog posts={posts} />, document.getElementById('root'))

It does not seem working. How can I pass variable posts to the imported Blog component?

Answer 1

Define Sidebar as static method:-

import React from "react";
import ReactDOM from "react-dom";

class Blog extends React.Component {

  // static sidebar component method
  static Sidebar(props) {
    return (
      <ul>
        {props.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  }

  posts = [
    { id: 1, title: "Hello World", content: "Welcome to learning React!" },
    { id: 2, title: "Installation", content: "You can install React from npm." }
  ];

  render() {
    return (
        <Blog.Sidebar posts={this.props.posts || this.posts} />
    );
  }
}

ReactDOM.render(<Blog />, document.getElementById("root"));

export default Blog;

and pass props to it like this:-

import React from 'react';
import ReactDOM from 'react-dom';
import Blog from './Blog'

const posts = [
    { id: 1, title: "Hello World", content: "Welcome to learning React!" },
    { id: 2, title: "Installation", content: "You can install React from npm." }
  ];

ReactDOM.render(<Blog.Sidebar posts={posts} />, document.getElementById('root'))

Answer 2

When you factor posts out as a global variable and pass it into the Blog component, it becomes this.props.posts inside of Blog :

class Blog extends React.Component {
  Sidebar(props) {
    return (
      <ul>
        {props.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  }

  render() {
    return (
        <this.Sidebar posts={this.props.posts} />           // <--- Change this
    );
  }
}