0

Here's my code. I'm making a screen on a mobile app and I keep getting the error above and if I take out the all together, the app crashes.

return (
 <form className={classes.root} noValidate autoComplete='off'>

  <div>
    <Text style={styles.textStyle}>Tell us about your skin! {'\n\n'}</Text>
    <Text style={styles.textStyle}>Skin Type: {'\n'}</Text>
    <TextField
      id='outlined-select-currency'
      select
      label='Select'
      value={skinType}
      onChange={handleChange}
      helperText='Please select your skin type'
      variant='outlined'
    >
      {skinTypes.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </TextField>
  </div>
</form>
Kahrin
  • 3
  • 1
  • To which line the error-msg is pointing at ? – Hend El-Sahli Jan 04 '21 at 20:15
  • check this topic: `https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component` – ktp Jan 04 '21 at 20:52
  • btw - have you closed the `return (` parenthesis? I can't find the closing one... – ktp Jan 04 '21 at 20:57
  • @HendEl-Sahli it doesn't give an error from my code, it's just pullling the error message from the react-native renderer file – Kahrin Jan 04 '21 at 22:03
  • @ktp I just missed it when I pasted it from my source file. It's there. Also none of those fixes in the thread you mentioned worked. And if it removed the error, it rendered a blank screen. – Kahrin Jan 05 '21 at 00:44
  • @Kahrin Did you build `TextField` and `MenuItem` ... or it's just imported from a library? – Hend El-Sahli Jan 05 '21 at 12:44

0 Answers0