Как передать функцию initialInput из useEffect() в тег input?

Получаю актуальный id input только в useEffect, мне нужно передать индекс в функцию initialInput для изменений значений в input. Как это сделать?

import React, {useEffect, useState} from 'react';

const AnonPage = () => {

    const [answers, setAnswers] = useState(['1', '2', '3'])
    const [editAnswer, setEditAnswer] = useState(null)

    function changeElement(event) {

        setAnswers(
            [
                ...answers.slice(0, editAnswer),
                event.target.value,
                ...answers.slice(editAnswer + 1)
            ]
        )
    }

    useEffect(() => {
        console.log('ID инпута:', editAnswer)

        function initialInput(index) {
            setEditAnswer(index)

            if (editAnswer)
                return answers[editAnswer]
            return answers[0]
        }
        
    }, [editAnswer])


    function result() {
        console.log(answers)
    }

    return (
        <div style={{display: 'flex', flexDirection: "column"}}>
            {
                answers.map((answer, index) =>
                    <input key={index}
                           value={answer}
                           onChange={changeElement}
                           onClick={() => initialInput(index)}
                           type="text" />
                )
            }
            <button onClick={result}>Результат</button>
        </div>
    );
};

export default AnonPage;

Пытался сделать через return достать функцию, но у меня не получилось.


Ответы (1 шт):

Автор решения: Алексей

Вам необходимо объявить функцию initialInput на уровне компонента.

const AnonPage = () => {

    const [answers, setAnswers] = useState(['1', '2', '3'])
    const [editAnswer, setEditAnswer] = useState(null)

    function changeElement(event) {

        setAnswers(
            [
                ...answers.slice(0, editAnswer),
                event.target.value,
                ...answers.slice(editAnswer + 1)
            ]
        )
    }

    function initialInput(index) {
        setEditAnswer(index)

        if (editAnswer)
            answers[editAnswer]
    }
        
    return (
        <div style={{display: 'flex', flexDirection: "column"}}>
            {
                answers.map((answer, index) =>
                    <input key={index}
                           value={answer}
                           onChange={changeElement}
                           onClick={() => initialInput(index)}
                           type="text" />
                )
            }
            <button onClick={result}>Результат</button>
        </div>
    );
};
→ Ссылка