Set State not working in react

1 
import React ,{Component} from 'react';
import './Avatar.css';
import Avatarlist from './Avatarlist'
import 'tachyons';

class Avatar extends Component{

constructor(){
  super();
  this.state = {
    name:"Welcome to Sapna World"
  }
}

namechange(){
  this.setState({
    name:"Welcome to Hello World"
  })
}

  render(){
    // array
    const avatarlistarray = [
      {
         id: "1",
         name:"Sapna",
         work:"Student"
      },
      {
         id: "2",
         name:"Sanjay",
         work:"Student"
      },
      {
         id: "3",
         name:"Roopa",
         work:"Student"
      }

    ]

    // map
    const avatarlistcard = avatarlistarray.map((avatarcard,index)=>{
     return <Avatarlist id={avatarlistarray[index].id}
                        name={avatarlistarray[index].name}
                        work={avatarlistarray[index].work} />
    }
    )


    return ( <div className="mainpage tc">
             <h1 className="tc">{this.state.name} </h1>
             {avatarlistcard}
            <p className="pa2"><button onclick={()=>this.namechange()}>Click Me</button></p>
             </div>
    )
  }
}

export default Avatar;

State not changing on button click.

2

Hello Sapna,

Please look at the console in your browser (ctrl + i in most browsers).

This should have the answer to your problem. If not, please let me know.

Good luck!

1 Like