Как изменить глобальный стейт по клику на сгенеренной ссылке?

Question

[kiberlain]

Есть вот такой кот, в котором из апи берутся названия и хрефы ссылок и создаётся список этих ссылок

import React from "react";
import App from "../App";

class Nav extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            contents: []
        }
    }
    sayHello() {
        alert('Hello!');
    }
    componentDidMount() {
        fetch("https://api", {
            headers: {
                Authorization: `Bearer key`
            }
        })
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    contents: data.records
                })
            })
            .catch(err => {
                console.log(err);
            });

    }

    render() {
        const {contents} = this.state
        return (
            <nav className="nav">
                <ul>
                    {this.state.contents.map(item => <MenuItem  key={item.id} {...item.fields} /> )}
                </ul>
            </nav>
        )
    }
}
export default Nav


const MenuItem = ({ Href, Title }) => (
    <li>
        <a href={'/' + Href}>{Title}</a>
    </li>
)

как теперь мне при клике на ссылку нужно менять свойство sectionTitle в App.jsx?
(ну и просьба в целом оценить правильно ли сделано подключение к апи и генерация списка)

constructor(props) {
        super(props)
        this.state = {
            sectionTitle: 'Добро пожаловать',
}
}

Comments

[Алексей Абрамов]

сделай метод, который меняет sectionTitle в app, пробрось его в MenuItem и навесь на клик по ссылке с передачей title

Answer 1

[Антон Иванов]

Привет. В целом код как код. Сейчас модно/современно использовать React на хуках, а не в виде классовых компонентов. По стейту - в твоем коде нет глобального стейта как такового вообще. Ты можешь подключить Redux (самое простое) или, если проникнешься хуками, использовать связку useReducer + useContext.