There are two components, I want to change the fragment from h1 by clicking. I don’t know how to do it right, I probably need it through setState . Not sure I understood correctly how to use it.

 import React from 'react'; import '../index.css' import Cover from './Cover' class Main extends React.Component { constructor(props) { super(props) state = { isClicked: false } this.changeName = changeName.bind(this); } render() { return ( <div className="main"> <input className="input" placeholder="Username" /> <button onClick={this.changeName} className="submit-button">Submit</button> </div> ) } changeName = () => { this.setState({ isClicked: true }) Cover.username = document.getElementById('input').nodeValue } } export default Main //---------------------------------------------------------------- import React from 'react'; import '../index.css' class Cover extends React.Component { constructor(props) { super(props) this.username = 'username'; } render() { return ( <div className="cover"> <img className="logo" src="./assets/logo.svg" /> <h1 className="header">Welcome on board, {{username}}!</h1> </div> ) } } export default Cover

    1 answer 1

    You can do everything simple. Let's start with the child component, namely with userName , if you want to change it inside the parent, then I would put it in the parent's props , and in the child component passed as props . Then the code will be a little more clear.

    Then in the child component we do not need a constructor. What will happen in the child component then (I recommend using camelCase when naming):

     import React from 'react'; import '../index.css' class Cover extends React.Component { render() { return ( <div className="cover"> <img className="logo" src="./assets/logo.svg" /> <h1 className="header">Welcome on board, {this.props.userName}!</h1> </div> ) } } export default Cover;

    Whereas in the parent there will be the following code:

     import React from 'react'; import '../index.css' import Cover from './Cover' class Main extends React.Component { constructor(props) { super(props) state = { isClicked: false, userName: 'default name' }; this.changeName = changeName.bind(this); } render() { return ( <div className="main"> <Cover userName={this.state.userName} /> <input className="input" placeholder="Username" /> <button onClick={this.changeName} className="submit-button">Submit</button> </div> ) } changeName = () => { this.setState({ isClicked: true, userName: document.getElementById('input').nodeValue }) } } export default Main;

    Note the following edits that I made.

    1. The Cover class has stopped having a constructor.
    2. The Cover class inside the render method has a name props from props
    3. The Main class inside the changeName method writes the userName to its state.
    4. The Main class inside the render method has <Cover userName={this.state.userName} /> child control drawing with transfer of props.
    5. The Main class inside the constructor has added the default userName: 'default name' for the first value, so that when calling the render method, the error is not dropped due to the lack of this.state.userName