Soy un principiante en React. Estoy tratando de crear mi primera aplicación ToDo. Actualmente, tengo dos componentes, uno con el botón de entrada y envío (para ingresar datos), creado con formik, segundo, simplemente componente donde quiero mostrar estos datos. No estoy seguro de cómo pasar datos entre estos componentes y estoy buscando consejos sobre cómo hacerlo correctamente.
Aquí está mi código:
Primer componente (para ingresar datos):
import React from "react"; import { Formik } from "formik"; import { View, Button, TextInput } from "react-native"; function MyForm(props) { return ( <View> <Formik initialValues={{ task: "" }} onSubmit={(values) => console.log(values)} > {({ handleChange, handleSubmit }) => ( <> <TextInput onChangeText={handleChange("task")} placeholder="Write a task" /> <Button onPress={handleSubmit} title="Click" /> </> )} </Formik> </View> ); } export default MyForm;Segundo componente (para mostrar datos):
import React from "react"; import { View, Text } from "react-native"; import MyForm from "./MyForm"; const TaskContainer = (props) => { return ( <View> <Text>Here is your list:</Text> </View> ); }; export default TaskContainer;Aquí hay un ejemplo simple de lo que quiero mostrar en el segundo componente:
estare agradecido por cualquier consejo
La solución a su problema es crear la declaración de su tarea en el Parent component . Después de eso, use la callback function de llamada (pásela a través de accesorios) para cambiar sus valores (yo uso el gancho useCallback para evitar la repetición inútil de componentes secundarios):
Componente principal
import React from 'react'; const ParentComponent = () => { const [tasks, setTasks] = React.useState([]); const addTask = React.useCallback( (newTask) => { setTasks([...tasks, newTask]); }, [tasks] ); return ( <> <MyForm tasks={tasks} addTask={addTask} /> <TaskContainer tasks={tasks} /> </> ); };Componente de formulario
import React from 'react'; import { Formik } from 'formik'; import { View, Button, TextInput } from 'react-native'; function MyForm({ tasks, setTasks }) { return ( <View> <Formik initialValues={{ task: '' }} onSubmit={(values) => setTasks(values)}> {({ handleChange, handleSubmit }) => ( <> <TextInput onChangeText={handleChange('task')} placeholder="Write a task" /> <Button onPress={handleSubmit} title="Click" /> </> )} </Formik> </View> ); } export default MyForm;Componente de tareas
import React from 'react'; import { View, Text } from 'react-native'; import MyForm from './MyForm'; const TaskContainer = ({ tasks, setTasks }) => { return ( <View> <Text>Here is your list:</Text> {tasks.map((task) => ( <Text>{task}</Text> ))} </View> ); }; export default TaskContainer;