Проблемы React с обновлением состояния

Я новичок в React и пытаюсь создать приложение, похожее на twitter, для этого проекта https://cs50.harvard.edu/web/2020/projects/4/network/.

Вот мой код:

function App (){
    const [state, setState] = React.useState({
        view: Allpostsview,
        newpost: ''

    });


    function Navitem(props){
        return(
            <a class="nav-link" style={{cursor:'pointer'}} onClick={()=>loadNewpage(props)}>{props.content}</a>
        )
    }
    if(document.querySelector("#newpost")){
        ReactDOM.render(<Navitem content='New Post' view={Newpostview} />, document.querySelector("#newpost"));

    }
    if(document.querySelector("#allposts")){
        ReactDOM.render(<Navitem content='All Post' view={Allpostsview}/>, document.querySelector("#allposts"));
    
    }
    
    if(document.querySelector("#user")){
        ReactDOM.render(<Navitem content='Username' view={Userview}/>, document.querySelector("#user"));
    
    }

    if(document.querySelector("#following")){
        ReactDOM.render(<Navitem content='Following' view={Followingview}/>, document.querySelector("#following"));
    
    }

    function loadNewpage(props){
        setState({
            ...state,
            view: props.view

        });
    }




    function Allpostsview(){
        return(
            <h1>All Posts</h1>
    
        );
    }

    function Newpostview(){
        return(
            <div className="formgroup functionDiv">
                <h2>New Post</h2>
                <textarea className="form-control" rows="3" onChange={()=>handleText(event)}></textarea>
                <button className="btn btn-primary" onClick={()=>handelNewpost()}>Post</button>

            </div>

        );
    }

    function handleText(event){
        console.log(event.target.value)
        console.log(state)
        setState({
            ...state,
            newpost: event.target.value

        });
    }

    function handelNewpost(){
        console.log('handleNewpost')
    }
    
    function Followingview(){
        return(
            <h1>Following</h1>
    
        );
    }

    function Userview(){
        return(
            <h1>Username</h1>

        );
    }
    return(
        <state.view />
    )


}
if(document.querySelector("#app")){
    ReactDOM.render(<App />, document.querySelector("#app"));

}

У меня две проблемы

1. Когда я пытаюсь отладить код с помощью функции Компоненты расширений хрома, мои Navitems перестают работать
.
2. В настоящее время я работаю над функцией нового сообщения. Функция handleText показывает мне, что мое состояние - это тот вид, в котором я был до того, как нажал на кнопку new post. Поэтому, когда я пытаюсь ввести текст, вид всегда меняется.

Я использую Django.

Вернуться на верх