Как изменить данные одной компоненты из другой React?

Question

[SecDet]

Есть 2 компоненты,хочу по клику изменить фрагмент из h1. Не знаю,насколько правильно делаю, нужно наверное через setState. Не уверен, что правильно понял, как его использовать.

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

Answer 1

[Антон Спирин]

Если удобно, то можно изменять данные через родителя.
Но правильней для вашей задачи использовать redux, так как имя пользователя может понадобиться в разных частях приложения, да и скорей всего будет приходить с сервера.

Comments

[SecDet]

Ну то есть,никаких заморочек с setState на этом уровне,не должно быть?

[Антон Спирин]

SecDet, на каком уровне? Если решать через родителя то надо в него поместить оба компонента, в нем определить state и хандлер и компоненту Main передавать handler, компоненту Cover писать в props state родителя.

Но лучше решить задачу c помощью redux, по причинам которые я описал выше.

[Антон Спирин]

SecDet, по поводу передачи через родителя можете посмотреть этот ответ.