Passing text field input from child component to parent

Question

I am creating a simple app to further test my knowledge of React and Node.js. Currently, I have an application with text fields that belong to a child component (FormText.js) ; however, I want the information that the user enters in these text fields to be transferred over to the parent component (DummyForm.js) to be put in a state object. This has to be done in the DummyForm.js file because I have other similar components that I need to do this with that will all route back to DummyForm.js so I can upload this stateful object to MongoDB using Node.js. I can't quite figure out how to go about doing this. Below is some React code that i am working with:

DummyForm.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormText from "./FormText";

const DummyForm = () => {
//I want the information from each of my child component to go in each 'textField' property respectively
    const [textFields, setTextFields] = useState({
        textField1: "",
        textField2: "",
        textField3: "",
        textField4: "",
    });

    return (
        <div>
          <div>
            <FormText text='Placeholder1'/>
            <FormText text='Placeholder2' />
            <FormText text='Placeholder3' />
            <FormText text='Placeholder4' />
          </div>
        </div>
    );
};

let renderedForm = () => {
    ReactDOM.render(<DummyForm />, document.getElementById("root"));
};

export { renderedForm };

FormText.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles({
    boxWrapper: {
        padding: "20px 0 10px 0",
    },
});

const FormText = (props) => {

    const classes = useStyles();

    const handleChange = (e) => {
        console.log(e.target.value);
    };
    return (
        <div className={classes.boxWrapper}>
            <TextField
                id='outlined-textarea'
                label={props.text}
                multiline
                variant='outlined'
                fullWidth
                color='secondary'
                onChange={handleChange}
            />
        </div>
    );
};

export default FormText;

I appreciate any help I can get. Thank you

Answer 1

What you want here is a Controlled Component. Using your code as an example you have:

DummyForm.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormText from "./FormText";

const DummyForm = () => {
  //I want the information from each of my child component to go in each 'textField' property respectively
  const [textFields, setTextFields] = useState({
    textField1: "",
    textField2: "",
    textField3: "",
    textField4: "",
  });

  const handleTextChange = (e) =>
    setTextFields({
      ...textFields,
      [e.currentTarget.name]: e.currentTarget.value,
    });

  return (
    <div>
      <div>
        <FormText
          text="Placeholder1"
          name="textField1"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder2"
          name="textField2"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder3"
          name="textField3"
          onChange={handleTextChange}
        />
        <FormText
          text="Placeholder4"
          name="textField4"
          onChange={handleTextChange}
        />
      </div>
    </div>
  );
};

let renderedForm = () => {
  ReactDOM.render(<DummyForm />, document.getElementById("root"));
};

export { renderedForm };

FormText.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles({
  boxWrapper: {
    padding: "20px 0 10px 0",
  },
});

const FormText = (props) => {
  const classes = useStyles();

  return (
    <div className={classes.boxWrapper}>
      <TextField
        id="outlined-textarea"
        label={props.text}
        multiline
        variant="outlined"
        fullWidth
        color="secondary"
        onChange={this.props.onChange}
        name={this.props.name}
      />
    </div>
  );
};

export default FormText;