Antd/React: Trying to style the 'extra' parameter of the Antd Collapse Panel element

user_5257353 0
Viewed 2044

I have an antd panel as part of a collapse/accordion element and I'm trying to style and render an additional section of text as part of the header. I read through their docs and they allow you to add extra elements in by utilizing the extra property but I can't seem to style it or add conditional rendering properties. What I'm trying to achieve is to set the right side text of the header to 'show' when the accordion is closed and change it to 'hide' when the accordion is open. I also want to style the text blue. I've ventured down different approaches including the following function at the top and nothing works. With this current implementation I'm getting several errors.

Expected an assignment or function call and instead saw an expression.

index.js:1446 Warning: Failed prop type: Invalid prop extra supplied to CollapsePanel, expected a ReactNode.

index.js:1446 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

The following is my component:

import React from 'react'
import styled from 'styled-components'
import { Col, Row, Collapse } from 'antd'
import Checkbox from '../elements/Checkbox'
import icon from '../../assets/caretDown.svg'
import Button from '../elements/Button'

const { Panel } = Collapse

function showHide() {
  return Collapse.isActive ? <p>SHOW</p> : <p>HIDE</p>
}

const ConfigurationOptions = () => (
  <Container>
    <Row>
      <Col span={12}>
        <StyledCollapse>
          <Panel
            header="DROPDOWN EXAMPLE"
            key="1"
            showArrow={false}
            bordered={false}
            extra={showHide}
          >
            <div>
              <StyledH1>Placeholder</StyledH1>
            </div>
        </Panel>
      </StyledCollapse>
    </Col>
  </Row>
</Container>
)

const StyledH1 = styled.h1`
  font-weight: 700;
`

const StyledCollapse = styled(Collapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`

export default ConfigurationOptions
antd reactjs javascript
1 Answers

Collapse.Panel extra property accepts ReactNode not a function, which means you need to pass a ReactElement to it:

extra={<p>{disabled ? 'SHOW' : 'HIDE'}</p>}

function FromValidate() {
  const [disabled, setDisabled] = useState(true);
  return (
    <Flexbox>
      <Row>
        <Col span={12}>
          <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled ? 'SHOW' : 'HIDE'}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
        </Col>
      </Row>
    </Flexbox>
  );
}

Demo

Edit Q-56761334-Style-Collapse-Extra

user_78824700
Related