reactjs - TextField form not appearing inside React App

Question

Following along with this tutorial : https://www.youtube.com/watch?v=ngc9gnGgUdA&t=15s

at 57 minutes in, while attempting to complete the "Form" section, I have correctly replicated the code, but my form does not appear in my app.

here is what it should look like : correct display

and here is what I'm getting: Form not appearing

I imagine this is a simple organizational gaffe since I am not throwing any errors in the console.

I am using the "material-ui/core" React framework.

At the top of my file on Import, TextField is shown as greyed or unused despite being in my file.

below is my form.js file:

    import React, { useState } from "react";
import { TextField, Button, Typography, Paper } from "@material-ui/core";
import FileBase from "react-file-base64";
import { useDispatch } from "react-redux";

import useStyles from "./styles";
import { createPost } from "../../actions/posts";

const Form = () => {
  const [postData, setPostData] = useState({
    creator: "",
    title: "",
    message: "",
    tags: "",
    selectedFile: "",
  });
  const classes = useStyles();
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();

    dispatch(createPost(postData));
  };

  const clear = () => {};

  return (
    <Paper className={classes.paper}>
      <form
        autoComplete="off"
        noValidate
        className={`${classes.root} ${classes.form}`}
        onSubmit={handleSubmit}
      >
        <Typography variant="h6">Creating a Memory</Typography>
        <textField
          name="creator"
          variant="outlined"
          label="Creator"
          fullWidth
          value={postData.creator}
          onChange={(e) =>
            setPostData({ ...postData, creator: e.target.value })
          }
        />
        <textField
          name="title"
          variant="outlined"
          label="Title"
          fullWidth
          value={postData.title}
          onChange={(e) => setPostData({ ...postData, title: e.target.value })}
        />
        <textField
          name="message"
          variant="outlined"
          label="Message"
          fullWidth
          value={postData.message}
          onChange={(e) =>
            setPostData({ ...postData, message: e.target.value })
          }
        />
        <textField
          name="tags"
          variant="outlined"
          label="Tags"
          fullWidth
          value={postData.tags}
          onChange={(e) => setPostData({ ...postData, tags: e.target.value })}
        />
        <div className={classes.fileInput}>
          <FileBase
            type="file"
            multiple={false}
            onDone={(base64) =>
              setPostData({ ...postData, selectedFile: base64 })
            }
          />
        </div>
        <Button
          className={classes.buttonSubmit}
          variant="contained"
          color="primary"
          size="large"
          type="submit"
          fullWidth
        >
          Submit
        </Button>
        <Button
          variant="contained"
          color="secondary"
          size="small"
          onClick={clear}
          fullWidth
        >
          Clear
        </Button>
      </form>
    </Paper>
  );
};

export default Form;

I am a mega noob so any help or guidance given, I am extremely grateful. If I can provide any more useful information please let me know!

question from:https://stackoverflow.com/questions/65928920/textfield-form-not-appearing-inside-react-app

Answer 1

Try TextField, with a capital T.

In react, if you use a tagname that starts with a lowercase, it will put that into the DOM directly, instead of treating it as a react component.

You should, with your old version, be able to right-click on your form, inspect element, and see textFields in your HTML.