CODEWITHSUNDEEP
javascriptreactjsreact-router
MasterofChronos
MasterofChronos

Reputation: 25

React JS Router changes props of element

I am stuck at a combination of SSR and CSR.

App.js

I am passing grid-data(from php) to the Grid component. The component looks like this: Component-Grid-Pre

If i click the "add"-button, it will add a new row to the table. When i click on the "table"-link, the component changes to table. When i click on the "grid"-link, to get back to the grid component, it keeps the new addet rows.

constructor(props) {
       super(props);
       console.log(props);
       this.state = {
           clicked: false,
           grid: props.grid
       };

       console.log(this.state);

       this.handleClick = this.handleClick.bind(this);
       this.handleButton = this.handleButton.bind(this);

   }

   handleButton() {
       fetch('/react/add')
           .then(data => {
               return data.json()
           })
           .then(json => {
               let grid = this.state.grid;
               grid.data = [...grid.data, ...JSON.parse(json)];
               this.setState({
                   grid: grid
               });
           });
   }

The console.log is showing the props with the new addet rows from state. How is this even possible?

Edit: Take a look at: streamable.com/ks8wf The Grid Component is filled with props. The table Component isn't. If i change the url to table, the grid isn't resetted. If i change from table to grid and back, the table component is resetted

Kind regards

Upvotes: 0

Views: 68

Answers (1)

zeev barlev
zeev barlev

Reputation: 26

  handleButton() {
       fetch('/react/add')
           .then(data => {
               return data.json()
           })
           .then(json => {
           // Now the grid is new object
               let grid = {
               ...this.state.grid,
               data : [...grid.data, ...JSON.parse(json)]
               };
               this.setState({
                   grid: grid
               });
           });
   }

Upvotes: 1

Related Questions