Creating a reusable component reactjs

Question

I read an article that creating small reusable components decreases the file size, makes unit testing faster and easier and a lot more. So I'm now trying to create one, however I am very new to reactjs and I'm maintaining this project for a friend, so I haven't written all the code.

Heres a code snippet:

class ObjectKeyDisplay extends Component {
  constructor(props) {
    super(props)
    this.state = { open: false } // Sets open to false (closed)
  }

  renderInner() {
    const { schema, parentDocumentId, collectionName, value } = this.props
    const { open } = this.state // equals const open = this.state.open

    let expandButton
    if (schema.type === 'belongs_to') {
      expandButton = (
        <button onClick={e => this.setState({ open: !open })}> // Sets it to true (opened)
          {open ? 'Minimera' : 'Expandera'}
        </button>
      )
    }

So I basically want to make the whole open/close process to a component, so I easily reuse the logic for other buttons. I would really appreciate if someone could help me out here!

You are missing code I guess. But I guess if you are looking for reusability of functionality you should take a deeper look into the Higher Order Component Pattern — larrydahooster
– larrydahooster, Commented Jul 6, 2017 at 15:41

Chase DeAnda · Accepted Answer · 2017-07-06 18:03:50Z

Here's a working example.

Move the button into it's own component where it can control it's own open state. Also, it'd be a good idea to provide some callbacks when the state changes that can be used in the parent component. There are multiple ways of conditionally rendering the button contents. What I've done here is pass in an array of children and if open is true, then render the first child in the array.

class Main extends React.Component {
    render(){
    return (
        <div>
        Expand button
        <ExpandButton onOpen={() => console.log('opened')} onClose={() => console.log('closed')} >
            <div>Open</div>
          <div>Close</div>
        </ExpandButton>
      </div>
    )
  }
}
class ExpandButton extends React.Component {
    constructor(){
    super();
    this.toggleOpen = this.toggleOpen.bind(this);
    this.state = {
        open: false
    }
  }
  toggleOpen(){
    this.setState({
        open: !this.state.open
    }, () => {
        // Trigger callbacks
        if(this.state.open){
        this.props.onOpen();
      }else{
        this.props.onClose();
      }
    })
  }
    render(){
    const { open } = this.state;
    return (
        <button onClick={this.toggleOpen}>
        {open ? this.props.children[0] : this.props.children[1]}
      </button>
    )
  }
}
React.render(<Main />, document.getElementById('container'));

Collectives™ on Stack Overflow

Creating a reusable component reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related