I'm trying to make app that will take the value of input element and use this value in inc/dec component. I have 2 components and I use props.

1. Component have input and a set button.
2. Component have inc/dec buttons and reset button

I'm enter number to first component set it with button. Then I want to inc/dec it in second component and I have NaN error. When I reset it the element take the value of first component and after that inc/dec works well.

first component:

import React, { useState } from "react";
import Sample from "../Sample/Sample";

const SetSample = () => {
    const [value, setValue] = useState();

    const formChange = (e) => {
        e.preventDefault();
    }

    const handlerChange = () => {
        const foo = document.querySelector("input").value * 1;
        setValue(foo);
    }

    return (
        <div>
            <form onSubmit={formChange}>
                <input type="text" />
                <button type="submit" onClick={handlerChange}>Set start value</button>
            </form>
            <p>Start value is: {value || 'Please enter a number'}</p>
            <hr />

            <Sample start={value} />
        </div>
    );
}

export default SetSample;

second component:

import React, { useState } from "react";

const Sample = (props) => {
    const point = props.start;
    const [counter = 0, setCounter] = useState(point);


    const decrement = () => {
        setCounter(counter - 1);
    }
    const increment = () => {
        setCounter(counter   1);
    }
    const reset = () => {
        setCounter(point);
    }

    return (
        <div>
            <button onClick={decrement}>-</button>
            <div>{counter}</div>
            <button onClick={increment}> </button>
            <div><button onClick={reset}>reset</button></div>
        </div>
    );
}

export default Sample;

It seems to me that the problem is in counter and point values.

CodePudding user response：

You first have to import useEffect hook from react, then in the dependency array, you have to enter your point variable.

Nothing interacts with your Sample.jsx after you click Set Start Value.

And when you click the reset button there is some interaction.

Due to that and you are able to see the number only after clicking reset.

import React, { useState , useEffect } from "react";
const Sample = (props) => {
    const point = props.start;
    const [counter = 0, setCounter] = useState(point);

    // edited here
    useEffect(()=>{
      setCounter(props.start);
    },[point]);

    const decrement = () => {
        setCounter(counter - 1);
    }
    const increment = () => {
        setCounter(counter   1);
    }
    const reset = () => {
        setCounter(point);
    }

    return (
        <div>
            <button onClick={decrement}>-</button>
            <div>{counter}</div>
            <button onClick={increment}> </button>
            <div><button onClick={reset}>reset</button></div>
        </div>
    );
}

export default Sample;

CodePudding user response：

In the first render you need to set the value of the input to be 0 just not to run into NaN error in SetSample component:

const [value, setValue] = useState(0);

and in Sample component you need to set the counter if it changes using useEffect and don't set 0 for it because it already has 0 from props.start:

const point = props.start;
const [counter, setCounter] = useState(point);

useEffect(() => {
  setCounter(point);
}, [point]);