7

error says : Do not pass children as props. Instead, nest children between the opening and closing tags when i add this part "children={}"

i'm not familiar with react and chakra so can somebody help solving this prolem ?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<Stack id='phone'>
  <InputGroup>
    <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />
    <Input
      type='tel'
      name={`${type}[phone]`}
      autoComplete='phone'
      value={Phone}
      placeholder='Numero de telephone'
      className='chakra-input'
    />
  </InputGroup>
</Stack>
Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
UNFVMILIVR
  • 73
  • 1
  • 1
  • 6

2 Answers2

23

I believe you need to change this:

<InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />

To this

<InputLeftElement pointerEvents='none'>
  <PhoneIcon color='gray.300' />
</InputLeftElement>
Serge Najimov
  • 431
  • 3
  • 12
0

Data that you are passing to 'children' props should be in array. (children={[]})

So you need to change this line

 <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} 
/>

to this

<InputLeftElement pointerEvents='none' children={[<PhoneIcon color='gray.300' 
/>]} />
Ayush Singh
  • 116
  • 6