0

I am following a react lesson on udemy. now I reach this point of my code

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

const app = props => {
    const [personState, setPersonState] = useState({
        persons: [
            {name: "Fil", age: 30}
        ],

        other: "other"
    });

    const switchHandler = () => {
        setPersonState({
            persons: [
                {name: "Fil", age: 40}
            ]
        })
    };

    return (
        <div className="App">
            <h1>I'm a react developer</h1>
            <Person name={personState.persons[0].name} age={personState.persons[0].age}>I am a children</Person>
            <button onClick={switchHandler}>Switch Name</button>
        </div>
    );
}

export default app;

after compiling that I encounter this error message which I don't know what to do or mean

React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
skyboyer
  • 22,209
  • 7
  • 57
  • 64
Fil
  • 8,225
  • 14
  • 59
  • 85

1 Answers1

2

Your app has to be PascalCase App. It is to make it known as a component.

Rename const app = to const App =

Ru Chern Chong
  • 3,692
  • 13
  • 33
  • 43