React props passed to child are undefined

Question

I am trying to pass a prop to child from parent where the props is part of the inner state of the parent

const [disabledBtn, setDisabledBtn] = useState(true)

Then in the parent component I call child comp:

<CustomSaveAll 
       disabled={disabledBtn}
       classes={classes.button}
  />

In my child component I assign the disabledBtn value to the button but it doesn't seem to have and affect and also it prints "undefined" in the useEffect hook.

child.js

const ConfirmButton = withStyles((theme) => ({
    root: {
      color: "white",
      backgroundColor: green[500],
      '&:hover': {
        backgroundColor: green[700],
      },
    },
  }))(Button);

  const approveChanges = () => {
    console.log("save all preferences!")
  }

export default function SaveAllButton(props) {
    const {disabledBtn, classes} = props 

    useEffect(() => {
      console.log(disabledBtn)
    }, [props])

    return (
        <div>
             <ConfirmButton
                style={{marginLeft:10}}
                variant="contained"
                color="inherit"
                className={classes.button}
                startIcon={<Icon>save</Icon>}
                disabled={disabledBtn}
                onClick={approveChanges}
            >
                Save All
            </ConfirmButton>
        </div>
    )
}

It there something I'm missing? Shouldn't the props be updated in the child once the parent is updated?

Answer 1

Did you try to change disabled to disableBtn in your component declaration:

<CustomSaveAll 
       disabledBtn={disabledBtn}
       classes={classes.button}
  />