Question 323181 in CSS Question posted in
Some basic documentation can be found here.

Css – React Warning: Unknown Prop 'expanded' Triggering DOM Error – Styled-Components Implementation in Vite with Read More Functionality

Context:
I am using React and styled-components to implement a "Read More" functionality for descriptions within a carousel using the react-slick library.

Objective:
The goal is to toggle the visibility of descriptions in the carousel when a "Read More" button is clicked. The implementation uses styled-components to handle the truncation of descriptions.

Issue:
I am encountering a warning related to styled-components, indicating that an unknown prop "expanded" is being sent to the DOM. Additionally, there’s an error stating that false is being received for a non-boolean attribute expanded.

The Code:

import { useState } from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function ReviewSlider({ list }) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
  };

  ReviewSlider.propTypes = {
    list: PropTypes.arrayOf(
      PropTypes.shape({
        description: PropTypes.string.isRequired,
      })
    ).isRequired,
  };


 return (
    <Carousel {...settings}>
      {list.map((item, index) => (

            <Description expanded={index === expandedIndex}>
              {item.description}
            </Description>
            
            {item.description.length > 200 && (
              <ReadMoreButton onClick={() => handleToggleExpand(index)}>
                {expandedIndex === index ? 'Read Less' : 'Read More'}
              </ReadMoreButton>
            )}

      ))}
    </Carousel>
  );
}

Here are my styled-components for Description and ReadMoreButton:

const Description = styled.p`
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: ${({ expanded }) => (expanded ? 'unset' : '5')};
  -webkit-box-orient: vertical;
  transition: -webkit-line-clamp 0.5s ease-in-out;
`;

const ReadMoreButton = styled.button`
  background: none;
  border: none;
  color: #525252;
  cursor: pointer;
  font-weight: bold;
  margin: 8px 0;
  padding: 0;
  outline: none;
  font-size: 16px;
`;

And here is the console:

Warning:

styled-components: it looks like an unknown prop "expanded" is being
sent through to the DOM, which will likely trigger a React console
error. If you would like automatic filtering of unknown props, you can
opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like
@emotion/is-prop-valid) or consider using transient props ($
prefix for automatic filtering.)

Error:

Warning: Received false for a non-boolean attribute expanded.

If you want to write it to the DOM, pass a string instead:
expanded="false" or expanded={value.toString()}.

If you used to conditionally omit it with expanded={condition &&
value}, pass expanded={condition ? value : undefined} instead.

I have attempted various solutions, including adjusting the way the expanded prop is used in the styled component and modifying the handleToggleExpand function.

Environment:

  • React version: 18.2.0
  • styled-components version: 6.1.8
  • Browser: Google Chrome
  • IDE: Visual Studio Code
Tags:

2

Answers


  1. 0

    Ensure that you are using the correct prop name and type in your component. For example, if you are passing an expanded prop to your component, make sure you have defined it in your PropTypes or TypeScript types.

    // PropTypes example
YourComponent.propTypes = {
  expanded: PropTypes.bool.isRequired,
  // other prop types
};

    ========================================================

    // TypeScript example
interface YourComponentProps {
  expanded: boolean;
  // other prop types
}

const YourComponent: React.FC<YourComponentProps> = ({ expanded, /* other props */ }) => {
  // component logic
};

    =======================================

    // Correct
<YourComponent expanded={true} />

// Incorrect (typo)

<YourComponent exapnded={true} />
    Login or Signup to reply.
  2. 0

    Hope u’re fine ^_^

    So, at your ReadMoreButton component, I guess that the error is because the expanded attribute is being interpreted as non-boolean (even when passed as false lol). And I think to resolve this you could omit the attribute when it’s false. Doing something like this:

    {item.description.length > 200 && (
  <ReadMoreButton
    expanded={expandedIndex === index}
    onClick={() => handleToggleExpand(index)}
  >
    {expandedIndex === index ? 'Read Less' : 'Read More'}
  </ReadMoreButton>
)}

const ReadMoreButton = styled.button`
  // another props here
  ${(props) => (props.expanded ? 'expanded="true"' : '')};
`;

    Sorry for my bad english and hope that u can solve ur problem soon:D

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search