Missing TextField

Question

OK, so I have another issue which is driving me bonkers.

This works (ie I see a TextField on the glass):

import TextField from '@mui/material/TextField';

function MyInput() {
  
  return (
    <span>
        <TextField
          autoFocus
          margin="dense"
          id="input"
          type="text"
          fullWidth
          variant="standard"
          value="abcd"
        />
    </span>
  )
}
   
export default MyInput;

This doesn't (ie no TextField is displayed: the DOM contains <div class="MuiFormControl....." which in turn contains the elements, but nothing in between them).)

import TextField from '@mui/material/TextField';

function MyInput() {

  const myfn = () => {
    return
        <TextField
          autoFocus
          margin="dense"
          id="input"
          type="text"
          fullWidth
          variant="standard"
          value="abcd"
        />
  }

  return (
    <span>
      {myfn()}
    </span>
  )
}

export default MyInput;

Any ideas as to why the second implementation doesn't display a text input field will be gratefully received!

Answer 1

If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will throw an error as unrecognized tag. This convention is because only HTML elements and SVG tags can begin with a lowercase letter.

Like this:

function MyInput() {
  const MyFn = () => {
    return (
      <TextField
        autoFocus
        margin="dense"
        id="input"
        type="text"
        fullWidth
        variant="standard"
        value="abcd"
      />
    );
  };

  return (
    <span>
      <MyFn />
    </span>
  );
}