react not updating array state

Question

if I clicked the button to update name then it's not changing using setState I want update persons variable and as well it should update in the DOM.

Please suggest me idea how to update the state

App.js

import React, { Component } from "react";
import Person from "./component/Person";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      persons: [
        { name: "max", age: 28 },
        { name: "manu", age: 29 },
        { name: "step", age: 26 }
      ]
    };
  }

  chnagenames = () => {
    console.log("clicked me ");
    this.setState = {
      persons: [
        { name: "maxi", age: 28 },
        { name: "manr", age: 29 },
        { name: "step", age: 27 }
      ]
    };
    console.log(this.state.persons);
  };

  render() {
    return <> {/* ... */} </>;
  }
}

export default App;

Person.js

import React from "react";

const Person = props => {
  return (
    <>
      person age is {props.ages} and name is {props.attrib}{" "}
    </>
  );
};

export default Person;

It seems you could have a typo: chnagenames. Is clicked me logged in the console? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 16, 2019 at 18:57

Tholle · Accepted Answer · 2019-03-16 19:02:40Z

1

You should call this.setState as it is a function, not assign a new value to it.

You also have a typo on the chnagenames method, and setState is also asynchronous so you will not see the change if you log it directly after setState.

changenames = () => {
  console.log("clicked me ");
  this.setState(
    {
      persons: [
        { name: "maxi", age: 28 },
        { name: "manr", age: 29 },
        { name: "step", age: 27 }
      ]
    },
    () => console.log(this.state.persons)
  );
};

answered Mar 16, 2019 at 19:02

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tholle Over a year ago

@SakibMulla You're welcome! Consider accepting one of the answers if you feel any of them answered your question.

YangDi0027 · Accepted Answer · 2019-03-16 19:05:55Z

0

please try this :

chnagenames = () => {
    console.log("clicked me ");
    var changedArray = [
        { name: "maxi", age: 28 },
        { name: "manr", age: 29 },
        { name: "step", age: 27 }
      ];

    this.setState({
      persons: changedArray
    }, function {
      console.log(this.state.persons);});    
  };

answered Mar 16, 2019 at 19:05

YangDi0027

215 bronze badges

Collectives™ on Stack Overflow

react not updating array state

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related