CODEWITHSUNDEEP
javascriptreactjsreact-routerstate
Paul
Paul

Reputation: 346

State disappear after Component Update

I made little Poll App with Home Component and New component Home Render state with question and vote option in New Component You can Make new poll with vote option. After goes to New component by "Add poll" button, old state disappear, So I cad add only one Poll. How can I maintain this state disappearing?

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Poll from './Poll'


class Home extends Component {
  state = {
    question:"",
    tag:[],
  }

componentDidMount() {
  if (this.props.location.state !== undefined) {
    const tag = this.props.location.state.tag;
    const que= this.props.location.state.question;
      this.setState({
      tag: [...this.state.tag, tag],
      question: [...this.state.question, que]
    })
  }
}


  render() {
    return (
      <div style={{marginTop:"200px", width:"1200px", marginLeft:"auto", marginRight:"auto"}}>
        <ul style= {{display:"flex",justifyContent:"center",alignItems:"center"}}>
        <Poll
          question={this.state.question}
          tag={this.state.tag}
        />
        </ul>
        <div style={{marginTop:"30px"}} >
          <Link to='/New'>
            <button
            style={{width:"100px", height:"80px", cursor:"pointer" }}>
              Add Poll
            </button>
          </Link>
        </div>
      </div>
    )
  };
}

export default Home;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Edit:

I passing State from New Component By 

<Link to={this.state.question && this.state.tag[0] ?
              { pathname: '/', state: {
              question: this.state.question,
              tag : this.state.tag
              } }
             :
             { pathname: '/New'}}>
              <button style={{padding:"8px", marginTop:"10px"}}>
                Add new poll
              </button>
            </Link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<BrowserRouter>
        <Switch>
          <Route exact path ="/" component={Home}/>
          <Route path ="/New" component={New} />
        </Switch>
      </BrowserRouter>

Upvotes: 0

Views: 1435

Answers (2)

Amanshu Kataria
Amanshu Kataria

Reputation: 3346

React component loses the state once the component gets unmount. If you want to maintain the state even after component unmount, then try using Redux.

Upvotes: 1

froston
froston

Reputation: 1167

You could separate your components to a container (Home) and presentional components (Poll List, New).

I.e Home would maintain the state and would render the list or new component. Thus you would never loose the state.

The add button would only change kinda flag in your state and according to that flag you would render one of the component.

Upvotes: 0

Related Questions