React method to pass input value state from parent component to child component

Question

I have a parent component that maps through my array and prints out an iteration of the various Child components.

I'm trying to access the state in the parent component but can't figure out how to extract the correct state for the "inputValue" from the child component and put it in the parent component.

Ideally I would like both the inputValue and isValidated states to exist in the parent component so that I can use them in various form-based functions.

Parent component:

import React, { useState } from 'react';
import { formFieldsData } from './FormFields';
import Input from './Input';

export default function Form() {

    return (
        <form>
            {formFieldsData.map((item) => (
                <Input
                    key={item.id}
                    id={item.id}
                    label={item.label}
                    type={item.type}
                    placeholder={item.placeholder}
                />
            ))}
        </form>
    )
}

Subassembly:

import React, { useState } from 'react';
import styles from './forms.module.scss';
import RangeInput from './RangeInput';

export default function Input({ type, id, placeholder = '', label, props }) {
    const [inputValue, setInputValue] = useState('');
    const [isValidated, setIsValidated] = useState(false);
    const isRangeInput = type === 'range';

    const handleChange = (e) => {
        setInputValue(e.target.value)
        if(inputValue.length >  0 || type === 'date') {
            setIsValidated(true)
        }
    }

    return (
        <div className={styles.form__row}>
            <label htmlFor={id}>{label}: {inputValue}</label>
            {isRangeInput
                ? <RangeInput id={id} onChange={(e) => handleChange(e)} />
                : <input
                    required
                    type={type}
                    id={id}
                    name={id}
                    placeholder={placeholder}
                    className={styles.input}
                    value={inputValue}
                    onChange={(e) => handleChange(e)}
                />
            }
            <button type="submit" id="formSubmit" onClick={() => alert('button click catched')} disabled={!isValidated}>Submit!</button>
        </div>
    )
}

Answer 1

The simplest way is to manage state in the parent component. Then you just need to pass a function as prop to the child component to update the parent component's state. This is an example from my previous answer to a related question, demonstrating how to pass data from a child component to a parent component. Please note that this kind of prop drilling is only appropriate in direct child components. If the hierarchical relationship between parent and child components extends, context/state management is more suitable.