How to make sure that the data remains after re-rendering the state ?

This is the code that I am trying to re-render after my submit. But the problem is that each time I try to submit my form, the data that I had accessed from the previous page(from DB) always disappear and gives an error saying undefined!!
This is my main page.

state={
    Name:this.props.location.state.Name ////*I am getting my error at this place : TypeError: Cannot read property 'Name' of undefined *
}

 Logout=(e)=>{
     e.preventDefault();
    this.props.history.push('/');

}


render(){
    return(
        <div className='main'>
            <div className='nav'>
                <h2>Manage Mart</h2>
    <h2 style={{textTransform:'uppercase'}}>{this.state.Name}</h2>
                {/* <img src={Alogo} alt="User"></img> */}
            </div>
        </div>
    );
    }

This is the component that is rendered on the Main page. This component also has access to the data from the previous page using this.props.history.push({pathname:’/AdminPage’,state:json});

state={

    Category:null,
    Description:null,
    User_Id:this.props.location.state.User_Id,*Even This is showing the same error*
    Info:[],
    isopened:false,

}


onAddHandle=(e)=>{

     this.setState({
        [e.target.id]:e.target.value,

    })
}
onSubmit=(e)=>{
    // e.preventDefault();
    // console.log(this.state);
    axios.post('http://localhost/backend-mall-management/ManagerPage/Category/Category.php',this.state)
    .then(res => console.log(res.data));

    this.setState({
        Category:'',
        Description:''
    })


}

I just need a way to keep the data from the previous page even after complete rendering.

These are the errors displayed.

1 Like

Solved it !! Using Redux.

1 Like