CODEWITHSUNDEEP
javascriptreactjs
erdii123
erdii123

Reputation: 11

TypeError: Cannot read property 'state' of undefined - rendering contents

Getting the error: TypeError: Cannot read property 'state' of undefined when I tried to render the elements with togglePersonsHandler to get the content which is inside the personsState. The goal is to get the contents by clicking on the button.

Here is my App.js file

import React, { useState } from 'react';
import './App.css';
import Person from './person/Person';

const App = props => {
  const [ personsState ] = useState({
    persons: [
      { name: 'Maxmillian', age: 28 },
      { name: 'Manu', age: 18 },
      { name: 'Stephanie', age: 24 }
    ],
    otherState: 'some other value',
    showPersons: false
  });


  const switchNameHandler = (newName) => {
    // console.log('Was clicked!');
    this.setState({
      persons: [
        { name: newName, age: 28 },
        { name: 'Manu', age: 18 },
        { name: 'Stephanie', age: 24 }
      ]
    });
  };

  const nameChangedHandler = (event) => {
    this.setState({
      persons: [
        { name: 'Max', age: 28 },
        { name: event.target.value, age: 18 },
        { name: 'Stephanie', age: 24 }
      ]
    })
  };

  const togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({showPersons: !doesShow});
  }
    
    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    };
  
  
    return (
        <div className="App">
          <h1>Hi, I'm a React App</h1>
          <p>This is really working!</p>
          <button 
            style={style}
            onClick={togglePersonsHandler}>Switch Name</button>
          { 
            this.state.showPersons === true ?
            <div>
              <Person 
                name={personsState.persons[0].name} 
                age={personsState.persons[0].age} />
              <Person 
                name={personsState.persons[1].name} 
                age={personsState.persons[1].age} 
                click={switchNameHandler.bind(this, 'Max!')}
                changed={nameChangedHandler}>My Hobbies: Racing</Person>
              <Person 
                name={personsState.persons[2].name} 
                age={personsState.persons[2].age} />
            </div> : null
          }
        </div>
      );
    }

  // ein Element entwickeln
  // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Work'));

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

And here the Person.js

import React from 'react';
import './Person.css';

const person = (props) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old. </p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
};

export default person;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

Thank you for the support!

Upvotes: 1

Views: 202

Answers (1)

matthiasgiger
matthiasgiger

Reputation: 1256

this.state and this.setState is only available in class components extending React.component. You're using a functional component, therefore you need to use hooks to update the state. I suggest to create a separate state for showPersons:

const [ showPersons, setShowPersons ] = useState(false);

const togglePersonsHandler = () => {
    setShowPersons(!showPersons);
}

If you only want one state, add a setter:

const [ personsState, setPersonsState ] = useState({...});

Upvotes: 2

Related Questions