Lowering State

index.js

// #### Lower State Challenge

//   ```js
// import Starter from './tutorial/11-performance/starter/02-lower-state-challenge';
// ```

//   - fix the re - rendering
//     - hint addPerson fix


import { useState } from 'react';
import { data } from '../../../../data';
import List from './List';
import Form from './Form';

const LowerStateChallenge = () => {
  const [people, setPeople] = useState(data);
  // const [name, setName] = useState('');

  // const handleSubmit = (e) => {
  //   e.preventDefault();
  //   if (!name) {
  //     alert('Please Provide Name Value');
  //     return;
  //   }
  //   addPerson();
  //   setName('');
  // };
  const addPerson = (name) => {
    const fakeId = Date.now();
    const newPerson = { id: fakeId, name };
    setPeople([...people, newPerson]);
  };

  return (
    <section>

      <Form addPerson={addPerson} />
      {/*<form className='form' onSubmit={handleSubmit}>
        <div className='form-row'>
          <label htmlFor='name' className='form-label'>
            name
          </label>
          <input
            type='text'
            name='name'
            id='name'
            className='form-input'
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button className='btn btn-block' type='submit'>
          submit
        </button>
      </form> */}
      <List people={people} />
    </section>
  );
};
export default LowerStateChallenge;



Form.js

import { useState } from "react"

function Form({ addPerson }) {

    const [name, setName] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!name) {
            alert('Please Provide Name Value');
            return;
        }
        addPerson(name);
        setName('');
    };

    return (
        <div>
            <form className='form' onSubmit={handleSubmit}>
                <div className='form-row'>
                    <label htmlFor='name' className='form-label'>
                        name
                    </label>
                    <input
                        type='text'
                        name='name'
                        id='name'
                        className='form-input'
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                </div>
                <button className='btn btn-block' type='submit'>
                    submit
                </button>
            </form>
        </div>
    )
}

export default Form;


List.js

import Person from './Person';

const List = ({ people }) => {
  return (
    <div>
      {people.map((person) => {
        return <Person key={person.id} {...person} />;
      })}
    </div>
  );
};
export default List;


Person.js

const Person = ({ name }) => {
  return (
    <div>
      <h4>{name}</h4>
    </div>
  );
};
export default Person;