CODEWITHSUNDEEP
javascriptreactjs
Faisal Nadeem
Faisal Nadeem

Reputation: 80

render is not working in react js while using state

I am trying to show content on render method but the code couldn't execute onClick in React JS. I have been following this course on Udemy.

import React, { Component } from 'react';
import './App.css';
import New from './New/New';
import Old from './Old/Old';


class  App extends Component  {
    state = {
        theirName : [
            {name:'Faisal', pind:'bhouch', age: 23}, 
            {name:'Haroon', pind:'Harrror', age: 17}
        ],
        showPerson : false,
    }

    togglePersonHandler =()=>{
    //this.setState({showPerson : !this.state.showPerson})
    const doesshow = this.state.showPerson;
    this.setState({showPerson : !doesshow});

    }

    switchNameHandler = (noname) =>{
        this.setState({
            theirName : [
                {name:'Faisal', pind: noname, age: 20}, 
                {name:'Haroon', pind:'england', age: 17} 
            ]
        });
    }
    render() {
        let persons = null;
        if (this.state.showPerson === true){
            persons =(
                <div>
                    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
                    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
                </div>
            );
        }
        return (
            <div className="App">
                <h1>Click on this to show content</h1>
                <button onClick={this.togglePersonHandler} >switch</button>
                <persons />
            </div>
        );
    }
}
export default App;

there is also no error or bug in code while doing where i am doing it wrong?

Upvotes: 2

Views: 134

Answers (4)

Arun Surawat
Arun Surawat

Reputation: 867

// I hope it will help you
//you are not  close render 
import React, { Component } from 'react';
import './App.css';
import New from './New/New';
import Old from './Old/Old';


class  App extends Component  {
  state = {
theirName : [
       {name:'Faisal', pind:'bhouch', age: 23}, 
       {name:'Haroon', pind:'Harrror', age: 17}

      ],

       showPerson : false,
 }

togglePersonHandler =()=>{
  //this.setState({showPerson : !this.state.showPerson})
  const doesshow = this.state.showPerson;
  this.setState({showPerson : !doesshow});

}

switchNameHandler = (noname) =>{
this.setState({
    theirName : [
           {name:'Faisal', pind: noname, age: 20}, 
           {name:'Haroon', pind:'england', age: 17} 
          ]
          });
        }
render() {
    let persons = null;
    if (this.state.showPerson === true){
      persons =(
        <div>
    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
    </div>
      );
    }

  return (
    <div className="App">
    <h1>Click on this to show content</h1>
    <button onClick={this.togglePersonHandler} >switch</button>
    <persons />
   </div>
  );
}
}

Upvotes: 0

Avinash Kumar
Avinash Kumar

Reputation: 19

Please check this it's work fine : 1- return was not a part of render 2- use {persons} instead of ----

import React, { Component } from 'react';
import './App.css';
import New from './New/New';
import Old from './Old/Old';


class  App extends Component  {
  state = {
theirName : [
       {name:'Faisal', pind:'bhouch', age: 23}, 
       {name:'Haroon', pind:'Harrror', age: 17}

      ],

       showPerson : false,
 }

togglePersonHandler =()=>{
  //this.setState({showPerson : !this.state.showPerson})
  const doesshow = this.state.showPerson;
  this.setState({showPerson : !doesshow});

}

switchNameHandler = (noname) =>{
this.setState({
    theirName : [
           {name:'Faisal', pind: noname, age: 20}, 
           {name:'Haroon', pind:'england', age: 17} 
          ]
          });
        }
render() {
    let persons = null;
    if (this.state.showPerson === true){
      persons =(
        <div>
    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
    </div>
  );
      }
      return (
        <div className="App">
        <h1>Click on this to show content</h1>
        <button onClick={this.togglePersonHandler} >switch</button>
        {persons}
       </div>
      );
  }
}

 
export default App;

Upvotes: 1

Sydney Y
Sydney Y

Reputation: 3152

I'm noticing a opening brace before your render return. Side note.

I think your functions are messing with your scope. Try declaring them like this:

togglePersonHandler () {
  // stuff here, and now 'this' should work
}

Upvotes: 0

Monica Acha
Monica Acha

Reputation: 1086

I think your return is not a part of render function. Hope this helps!

render() {
    let persons = null;
    if (this.state.showPerson === true){
      persons =(
        <div>
    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
    </div>
  );
      }
 // }  =>render function gets closed. It should be closed after return statement
// } => extra brackets

  // {  Also, return should be inside of render
   return (
    <div className="App">
    <h1>Click on this to show content</h1>
    <button onClick={this.togglePersonHandler} >switch</button>
    <persons />
   </div>
  );
} //closing for render
} //closing for App

Upvotes: 2

Related Questions