I am a beginner in React. I'm trying to create my first ToDo App. Currently, I have two components - one with input and submit button (to enter data) - created with formik, second - simply component where I want to display this data. I'm not sure how to pass data between these components and I'm looking for tips on how to do it correctly.
Here is my code:
First component( to enter data):
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;
Second component( to display data):
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;
Here is simple example of what I want to display in second component:
I will be grateful for any advice
The solution to your problem is creating the statement of your task in the Parent component. After that use the callback function (pass it through props) to change its values (I use useCallback hook to prevent useless re-rendering of child components):
Parent component
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} />
</>
);
};
Form component
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;
Tasks component
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;