Невозможно отправить данные состояния в качестве реквизита другому компоненту

Question

Я новичок, чтобы реагировать. И я пытаюсь создать электронное приложение, используя реагирование js.

. Я хочу отправить значение родительского компонента state дочернему компоненту в качестве реквизита. Родительский компонент - Home, а дочерний - Help.

Home.jsx

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
        step: 1,
        name: "",
        address: "",
        amount: "",
        }
    }

    handleChange = (e) => {   
        let nam = e.target.name;
        let val = e.target.value;
        this.setState({ [nam]: val });
    }

    render() {
    const {date} = this.state;
    const values = {date}
        return(
            <Fragment>
            <label id="form-name">Name: </label>
            <input
                type="text"
                name="name"
                id="input-name"
                onChange={this.handleChange}     
            />
            {other values}
                <Link to="/help" className="btn">next </Link>    
            </div>
            </Fragment>
            );
            return(
                <Help 
                {...this.state}
                />
        )
    }
}

Help.jsx

import React, {Component, Fragment} from 'react';
import { Link } from 'react-router-dom';

export class Help extends Component {
  continue = () => {
    window.print();
  }

  render() {
   return(
    <Fragment>
        <p id="date">Date : {this.props.date}</p>
        <p id="name">RECIEVED With thanks from {this.props.name}</p>
        <Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>
        <button id="btn-back" onClick={this.goBack}>
          Back
        </button>
      </Fragment>
    )
  }
}

export default Help;

Спасибо за помощь

Answer 1

не используйте компонент на основе классов, вместо этого вы можете использовать такой функциональный компонент

const help = (props) => {
  continue = () => {
    window.print();
  }
  render() {
   return(
   <p id="date">Date : {props.date}</p>
          <p id="name">RECIEVED With thanks from {props.name}</p>
<Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>

        <button id="btn-back" onClick={this.goBack}>
          Back
        </button>
      </Fragment>
    )
  }
}