Access the child component prop inside the parent component

Question

I'm facing a problem there is a styled component named Breadcrumb but that component depends upon 1 separate styled-components i.e BreadcrumbItem. Both components have different props.

BreadcrumbItem.js:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const propTypes = {
  /** Active the current BreadcrumbItem. */
  active: PropTypes.bool,
  /** Additional classes. */
  className: PropTypes.string
};



const AbstractBreadcrumbItem = (props) => {
  const { className, active, ...attributes } = props;

  return ;
};

AbstractBreadcrumbItem.propTypes = propTypes;

const BreadcrumbItem = styled(AbstractBreadcrumbItem)``;

BreadcrumbItem.propTypes = propTypes;

export default BreadcrumbItem;

Breadcrumb.js:

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";

const propTypes = {
  /** Additional classes. */
  className: PropTypes.string,
  /** Primary content. */
  children: PropTypes.node,
  /** Custom separator */
  separator: PropTypes.string,
  /** Change the look and feel of the BreadcrumbItem. */
  scheme: PropTypes.oneOf(["red", "purple"]).isRequired
};

const defaultProps = {
  scheme: "red",
  separator: "/"
};

const AbstractBreadcrumb = props => {
  const { className, children, separator, scheme, ...attributes } = props;

  return (
    
      {children}
    
  );
};

AbstractBreadcrumb.propTypes = propTypes;
AbstractBreadcrumb.defaultProps = defaultProps;

const Breadcrumb = styled(AbstractBreadcrumb)`

              display: flex;
              flex-wrap: wrap;
              padding: 18px 26px;
              margin-bottom: 1rem;
              list-style: none;
              background-color: #fbfbfb;
              border-radius: 4px;


              li + li:before {
                content: "${props => props.separator}";
              }

              li + li {
                padding-left: 8px;
            }

              li + li::before {
              display: inline-block;
              padding-right: 0.5rem;
            }

            li a {
               font-size: 14px;
               transition: color .4s linear;
               color: ${props => (props.scheme === "red" ? "red" : "purple")};
               &:hover {
                color: black;
               }
            }
`;

Breadcrumb.propTypes = propTypes;
Breadcrumb.defaultProps = defaultProps;

export default Breadcrumb;

This is the main markup to create the Breadcrumb.

App.js:

import React from 'react';
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';

export default function App() {
  return (
    
      
        
          Home
        
        
          Shop
        
        
          Product
        
      
    
  );
}

What problem I'm facing is I want to use the active prop of the BreadcrumbItem component inside the parent Breadcrumb component to change the look and feel of the item according to the scheme.

I found the first way which is to add the BreadcrumbItem styles inside the component itself and use something like this ${props => props.active ? css`` : css``}. But Is there a way in styled-component to access the child component prop inside the Parent component?

Please answer the question in the context of styled-components.

Live link: Codesandbox

user_3527843 · Answer

I'd suggest to move the styling of list item, i.e.

, to its own component, i.e. BreadcrumbItem. In this scenario you won't need to access the state of child component instead you'll be handling active state in

styles. And it'll look more cleaner and separation of concern (which React recommends) will be there.

[EDIT]: Sample code to access props of children

const List = ({ children }) => {
  return (
    
      {React.Children.map(children, x => {
        console.log(x.props); // get props of children

        return x;
      })}
    
  );
};

const Item = ({ children }) => {children};

export default function App() {
  return (
    
      Hello
      HI
    
  );
}

Access the child component prop inside the parent component

1 Answers