Showing posts with label Reactjs. Show all posts
Showing posts with label Reactjs. Show all posts

Tuesday, November 6, 2018

React Components in loop

How to create dynamic react component in loop

state={

  Userinfo:[

    { name: 'Ravish Jha', Location: 'India'},

    { name: 'Ritika Jha', Location: 'USA'},

    { name: 'Raju Jha', Location: 'UK'}

  ]

} 
 
render() {
return (
<div className="App">
{
this.state.Userinfo.map(info => {
return <Useroutput UserName= {info.name}
UserLocation
={info.Location} />
})}
</div>
);
}
 

Thursday, December 14, 2017

React toggle Class Name on click

getInitialState: function() {
    return {
      myclass: "ravish"
    }
  },
  handleClick: function() {
var temp="ravish";
if( this.state.myclass=="ravish"){
  temp="ravish open"
}
this.setState({
      myclass: temp
    });


<div id="change button" className={this.state.myclass} onClick={this.handleClick} ></div>