Cannot read properties of undefined (reading 'header')

user_17269299 0
Viewed 5277

So I'm trying to use the custom collapse from this stackoverflow post and when I include it Cannot read properties of undefined (reading 'header') problem happened. I have no idea what is going on and it works completely fine on Codepen.
Here's the code:
It's basically the same , i just added some icon.

const CustomCollapse = ({props}) => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style={{ color: "#0076de", float: "right" }}>
              {disabled ? <div id="themeBox"><p>+10</p></div> : <img src={arrowDownIcon} alt="" style={{objectFit:'contain'}} />}
            </span>
          </span>
        }
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

Here is where I use the Collapse:

<div className={styles.telegramLinks}>
     <AntCollapse header="test">
        <h1>test</h1>
     </AntCollapse>
</div>
antd reactjs
2 Answers

In the declaration of CustomCollapse:

const CustomCollapse = ({props}) => {
 // ...
};

should be

const CustomCollapse = (props) => {
 // ...
 // use `props.header`
};

Otherwise it is as if you are looking for an attribute named props on the component, that is, a props with the name props.

Alternatively you can declare:

const CustomCollapse = ({ header }) => {
 // ...
 // use `header` directly instead of `props.header` 
};
user_31201930

I believe if you want to get props this way you need to use :

const CustomCollapse = (props) => {

instead of

const CustomCollapse = ({props}) => {
user_169564360
Related