如何将值从状态传递到另一个组件

Question

I have two pages on my react app. One page allows you to submit a post, and the second page shows all of the posts. I need to be able to retrieve the data from the state on one page, but I am receiving an error. What am I doing wrong to display this, because I thought I could use props to gather the state from my post page.

My Display Post Page:

import React from 'react';
import './App.css';


export default class Scroll extends React.Component {


    render() {
        return (

            <div className="flex-container">
                <div className="post">
                    {this.props.displayPost(this.props.state.posts)}
                </div>
            </div>
        );
    }
}

My post page:

import React from 'react';
import axios from 'axios';
import './App.css';
import { post } from '../../routes/routes';

export default class PersonList extends React.Component {

    state = {
        title: "",
        body: "",
        posts: []
    };

    componentDidMount = () => {
        this.getPost();
    }

    getPost = () => {
        axios.get("http://localhost:5000/posts/save")
            .then((response) => {
                const data = response.data;
                this.setState({ posts: data });
                console.log("Data has been recieved")
            })
            .catch(() => {
                alert("Error recieving data")
            })
    }

    handleChange = (event) => {
        const target = event.target;
        const name = target.name;
        const value = target.value;

        this.setState({
            [name]: value
        })
    };

    submit = (event) => {
        event.preventDefault();

        const payload = {
            title: this.state.title,
            body: this.state.body,
        }

        axios({
            url: 'http://localhost:5000/posts/save',
            method: 'POST',
            data: payload,
        })
            .then(() => {
                console.log('Data sent to the server');
            })
            .catch(() => {
                console.log('Internal server error');
            });
    };

    displayPost = (posts) => {
        if (!post.length) return null;

        return posts.map((post, index) => {
            <div key={index}>
                <h3 id="post-text">{post.title}</h3>
                <p id="post-text">{post.body}</p>
            </div>
        });
    }

    render() {
        console.log("State ", this.state)
        return (
            <div className="flex-container-home">
                <div className="app">
                    <form onSubmit={this.submit}>
                        <input
                            placeholder="title"
                            type="text"
                            name="title"
                            value={this.state.title}
                            onChange={this.handleChange}
                        />
                        <textarea placeholder="description"
                            name="body"
                            cols="30" rows="10"
                            value={this.state.body}
                            onChange={this.handleChange}
                        >
                        </textarea>
                        <button>Submit</button>
                    </form>
                </div>
            </div>
        )
    }
}

Answer 1

Here is working example:

import React from "react";

export default class PersonList extends React.Component {
  state = {
    title: "",
    body: "",
    posts: [],
  };

  componentDidMount = () => {
    this.getPost();
  };

  getPost = () => {
    this.setState({ posts: ["post1", "post2", "post3"] });
  };      

  displayPost = (posts) => {
    if (!posts || !posts.length) return null;

    return posts.map((post, index) => (
      <div key={index}>
        <p>{post}</p>
      </div>
    ));
  };

  render() {
    return (
      <div className="App">
        <Scroll displayPost={this.displayPost} posts={this.state.posts} />
      </div>
    );
  }
}

class Scroll extends React.Component {
  render() {
    return (
      <div className="post">
        Posts: {this.props.displayPost(this.props.posts)}
      </div>
    );
  }
}