React variable passed down to child component is undefined

Question

I have a variable [key, setKey] with state set to some string which I would like passed down to some other component. A problem I'm having is that the child component does not recognise it.

function AppWindow() {


  const [key, setKey] = useState('test');


return (
 
      <Box sx={{}}>

            <Settings2 key={key} setKey={setKey}/>

      </Box>

function Settings2({key, setKey}) {

const handleChange = (e) => {
        

        
        setKey('e');
        console.log(key);
       

      };

return(
<form>
                                    <Input
                                            variant= 'standard'
                                            type='text'
                                            disablePortal
                                            id="combo-box-demo"
                                            sx={{ width: '100%', input: {color: '#d4e1ed'} }}
                                            placeholder='Enter Your Key'
                                            onChange={(e) => handleChange(e)}
                                    />
                                 </form>
...

Even when I explicitly try to set a string it's still undefined for some reason. Did I pass it down correctly?

Rafael Buzatto de Campos · Accepted Answer · 2022-09-22 21:10:40Z

4

key is a reserved prop for React to identify a given component. Given that you can't extract it as a prop. you should rename your prop a different name.

answered Sep 22, 2022 at 21:10

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React variable passed down to child component is undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related