CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooksformik
MartynBrzoz
MartynBrzoz

Reputation: 101

React & Formik, Passing data between components

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

Upvotes: 1

Views: 4001

Answers (1)

Cucunber
Cucunber

Reputation: 161

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;

Upvotes: 1

Related Questions