CODEWITHSUNDEEP
reactjsreact-hooks
Toontje
Toontje

Reputation: 1485

How to add number from form in child component to array of numbers in parent component

I'm trying to add a value from a textfield in a childcomponent (AddNum.js) to a array of numbers in the parent component (App.js).

Therefor I created in the parent component a usestate hook 'setValuesList':

const [valuesList, setValuesList] = useState([]);

Then I pass the hook to the childcomponent like this:

<AddNum valuesList={valuesList} setValuesList={setValuesList} />

My childcomponent looks like this:

import React, { useState } from 'react';

const AddNum = ({ valuesList, setValuesList }) => {
  const [value, setValue] = useState('');

  const addNumber = (value) => {
    const number = parseInt(value);
    setValuesList([...valuesList, number]);
  };

  return (
    <form onSubmit={addNumber}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      ></input>
      <button>Add Number</button>
    </form>
  );
};

export default AddNum;

However, when I console log 'valuesList' in the parent component, and add a number through the form, I get an empty array:

[]

Does anyone know what I am doing wrong, and how can I fix this?

my repository is at:

https://github.com/acandael/add-to-list

thanks for your help,

Anthony

Upvotes: 1

Views: 52

Answers (2)

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7055

import React, { useState, useEffect } from 'react';
import AddNum from './AddNum';

const App = () => {
  // do not write it like this     
  // const { valuesList, setValuesList } = useState([]);

  const [ valuesList, setValuesList ] = useState([]);

  useEffect(() => {
      console.log(valuesList);
  }, [valuesList])

  return (
    <div>
      {<AddNum valuesList={valuesList} setValuesList={setValuesList} />}
    </div>
  );
};

export default App;

If you console.log outside useEffect it will always have the initial value, you need to get it inside useEffect and pass valuesList as dependency

Upvotes: 0

subashMahapatra
subashMahapatra

Reputation: 6857

The first argument to the onSubmit handler will the event. The current implementation of the function addNumber that is passed as the submit handler to the form is completely incorrect.

Solution create a new submit handler function and to prevent the default form submit behavior call event.preventDefault() then do all the adding number logic.

const AddNum = ({ valuesList, setValuesList }) => {
  const [value, setValue] = useState('');

  const addNumber = (value) => {
    const number = parseInt(value, 10);
    setValuesList(prev => [...prev, number]);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    addNumber(value)
  }

  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      ></input>
      <button>Add Number</button>
    </form>
  );
};

Working demo in codesandbox

Upvotes: 1

Related Questions