Advanced Reactjs 
Tags: react, javascript, webdev, beginners
Published: 2018-06-29 05:05:57

---
title: Advanced Reactjs 
published: true
description: Today we learn something new and advanced in Reactjs we all know in Reactjs props are used to communicate with the other components.
tags: react,javascript,webdev,beginners
cover_image: https://raw.githubusercontent.com/saigowthamr/React-Accordion/master/screenshot.gif
---


Today we learn something new and advanced in Reactjs we all know in Reactjs props are used to communicate with the other components.


Now we learn something different called Compound Components in React using some top-level apis.

1.React.Children.map
2.React.cloneElement()


Our final output should like the below image.

**React-Accordion**
![](https://raw.githubusercontent.com/saigowthamr/React-Accordion/master/screenshot.gif)


## Accordion Component code

```javascript
<Accordion>
        <Heading>Heading 1</Heading>
        <Text>
          “You've gotta dance like there's nobody watching, Love like you'll
          never be hurt, Sing like there's nobody listening, And live like it's
          heaven on earth.” ― William W. Purkey
        </Text>
        <Heading>Heading 2</Heading>

        <Text>
          “Don’t walk in front of me… I may not follow Don’t walk behind me… I
          may not lead Walk beside me… just be my friend” ― Albert Camus
        </Text>
        <Heading>Heading 3</Heading>

        <Text>
          “Darkness cannot drive out darkness: only light can do that. Hate
          cannot drive out hate: only love can do that.” ― Martin Luther King
          Jr., A Testament of Hope: The Essential Writings and Speeches
        </Text>
        <Heading>Heading 4</Heading>

        <Text>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
          Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
          condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
          Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu
          ante scelerisque vulputate.
        </Text>
        <Heading>Heading 5</Heading>
        <Text>
          “I believe that everything happens for a reason. People change so that
          you can learn to let go, things go wrong so that you appreciate them
          when they're right, you believe lies so you eventually learn to trust
          no one but yourself, and sometimes good things fall apart so better
          things can fall together.” ― Marilyn Monroe
        </Text>
      </Accordion>
```

Now let's get into the logic in above code Accordion component is holding the different types of children example Heading, Text.


## Accordion Component implementation.

```javascript

class Accordion extends React.Component {
  state = {
    active: -1
  };

  onShow = i => {
    this.setState({
      active: i
    });
  };
  render() {
    const children = React.Children.map(this.props.children, (child, i) => {
      return React.cloneElement(child, {
          heading: this.state.active  === i,
          text: this.state.active + 1 === i,
          onShow: () => this.onShow(i)
      });
    });

    return <div className="accordion">{children}</div>;
  }
}
```
what above code does is instead of returning the children we are mapping the children using React.Children.map and cloning the child by passing some state to the Children it means we are passing state down to the children.



## Heading Component.

```javascript
class Heading extends React. Component {
  render() {
    const { heading, onShow, children } = this.props;

    return (
      <h2 className={heading ? "active" : "normal"} onClick={onShow}>
        {children}
      </h2>
    );
  }
}
```

# Text Component

```javascript
class Text extends React.Component {
  contentBox = () => {
    if (!this.props.text) {
      return null;
    } else {
      return (
        <div className="content-box">
          <p className="text">{this.props.children}</p>
        </div>
      );
    }
  };

  render() {
    return this.contentBox();
  }
}
```

Other example 

![](https://thepracticaldev.s3.amazonaws.com/i/fan2xwgb9e1xpyk74laq.gif)

Have you seen there is no state present inside the Text or Heading components.


Hope you guys enjoyed....

## [Demo  url](https://saigowthamr.github.io/React-Accordion/)

## [Code Repository](https://github.com/saigowthamr/React-Accordion)