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?

Answer 1

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.