J'ai un composant parent qui mappe mon tableau et imprime une itération des différents composants enfants.

J'essaie d'accéder à l'état dans le composant parent mais je n'arrive pas à comprendre comment extraire l'état correct pour la "inputValue" du composant enfant et le mettre dans le composant parent.

Idéalement, j'aimerais que les états inputValue et isValidated existent dans le composant parent afin de pouvoir les utiliser dans diverses fonctions basées sur un formulaire.

Composant parent :

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>
    )
}

Sous-composant :

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>
    )
}