React - Cannot enter input if put value = {name}

Question

I'm quite new to React, and I'm trying to figure out why can't I enter my input if I put the value = {address.suburb} into my TextField:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const FlatAddress = (props) => {
  const { navigation } = props;
  const { address } = props.formData;

  const onSubmit = (e) => {
    e.preventDefault();
    navigation.next();
    console.log(address);
  };

  return (
    <form onSubmit={onSubmit}>
      <h1>This is flat address page</h1>

      <TextField
        id="outlined-basic"
        variant="outlined"
        label="Street number"
        value={address.street}
        onChange={props.setForm}
        name="streetNumber"
        margin="normal"
        variant="standard"
        autoComplete="off"
        fullWidth
      />
    </form>
  );
};

export default FlatAddress;

This is another component from my other component:

import React from "react";
import { useForm, useStep } from "react-hooks-helper";
import FlatAddress from "./FlatAddress";
import FlatInfo from "./FlatInfo";
import FlatChecklist from "./FlatChecklist";

const defaultData = {
  firstName: "",
  lastName: "",
  age: 0,
  address: {
    street: "",
    suburb: "",
    city: "",
    country: "",
  },
  photo: "",
};

const steps = [{ id: "information" }, { id: "address" }, { id: "photo" }];

const Flat = (props) => {
  const { user } = props;
  const [formData, setForm] = useForm(defaultData);
  const { step, navigation } = useStep({
    steps,
    initialStep: 0,
  });
  const prop = { formData, setForm, navigation };

  switch (step.id) {
    case "information":
      return <FlatInfo {...prop} user={user} updateUser={props.updateUser} />;
    case "address":
      return (
        <FlatAddress {...prop} user={user} updateUser={props.updateUser} />
      );
    case "photo":
      return (
        <FlatChecklist {...prop} user={user} updateUser={props.updateUser} />
      );
  }

  return <h1>Flat Sign Up</h1>;
};

export default Flat;

I tried on another component (TextField as well) and it works fine, but in this one it doesn't allow me to type anything in.

Answer 1

it seems like you are putting the wrong name on the TextField. you named it streetNumber, but the value is the address.street variable.

By reading the react-hooks-helper docs it seems like the name of the input must the the same name of the variable

try this:

<TextField
    id="outlined-basic"
    variant="outlined"
    label="Street number" value = {address.street} onChange = {props.setForm}
    name="adress.street" //changed name to match value variable
    margin="normal"
    variant="standard" 
    autoComplete="off"
    fullWidth
/>