Tengo una página en la que cargo un componente de entrada dinámicamente con un clic de botón, el componente de entrada es una barra de búsqueda personalizada que muestra una pista cuando el usuario ingresa la entrada de búsqueda. La sugerencia funciona, pero no puedo obtener la función onclick para actualizar el texto de entrada para convertirlo en una matriz de cadenas.

 import React, { useCallback } from "react"; import { Col, Form } from "react-bootstrap"; const FormComponent = (props) => { const arrhandler = useCallback( (value) => { props.setValue(value); props.setResult([]); }, [props.setValue] ); return ( <Col xs={12} sm={12} md={12} lg={4}> <Form.Group className="mb-3"> <Form.Label>DEPARTURE</Form.Label> <Form.Control type="text" value={props.value} onChange={props.handler} /> </Form.Group> {props.arr && props.arr.map((port, i) => ( <div key={i} onClick={() => arrhandler(val.name)}> {val.name} </div> ))} </Col> ); }; export default FormComponent;

Este es mi componente de formulario

En el componente principal que tengo

 import React, { useEffect, useState } from "react"; import { Container, Button } from "react-bootstrap"; import axios from "axios"; const ParentComponent = () => { const [forms, setForms] = useState([]); const [value, setValue] = useState(""); const [result, setResult] = useState([]); useEffect(() => { axios.post(`/api/search/${value}`).then((res) => setResult(res.data)); }, [value]); const newForm = (e) => { setForms(forms.concat(<FormComponent key={forms.length} />)); }; return ( <Container> <Button className="col-lg-5 col-sm-12 mb-2" variant="outline-secondary" size="lg" onClick={newForm} > Add New Search </Button> {form.length > 0 ? forms.map((form) => ( <FormComponent value={form.value} handler={(e) => setValue(e.target.value)} arr={result} setValue={setValue} setResult={setResult} /> )) : ""} </Container> ); };

Parece que no puedo averiguar cómo actualizar el campo de entrada con la función onclick, para poder almacenar el resultado en una matriz.