How to customize requests inside a React component

Question

I have a component ContentHeader that I will use in almost each content, it provides a header with title and two buttons, New and Search.

import React from 'react';
import Title from 'components/Title';
import BtnSearch from 'components/BtnSearch';
import BtnNew from 'components/BtnNew';

class ContentHeader extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    return (
      <div className='content-header'>
        <Title name={this.props.title} />

        <ul className='actions'>
          <li className='action-item'>
            <BtnSearch />
          </li>
          <li className='action-item'>
            <BtnNew />
          </li>
        </ul>
      </div>
    );
  }
}

export default ContentHeader;

The button components that I use inside the ContentHeader:

// Component Button Search
import React from 'react';
import { NavLink } from 'react-router-dom';

class BtnSearch extends React.Component {
  constructor (props) { 
    super(props);
  }

  render () {
    return (
      <a className='btn-actions btn-search' onClick=CUSTOM_REQUEST>
        <span className="icon-center"></span>
      </a>
    )
  }
}

export default BtnSearch;


// Component Button New
import React from 'react';
import { NavLink } from 'react-router-dom';

class BtnNew extends React.Component {
  constructor (props) { 
    super(props);
  }

  render () {
    return (
      <NavLink to=CUSTOM_REQUEST className='btn-actions btn-new'>
        <span className="icon-center"></span>
      </NavLink>
    )
  }
}

export default BtnNew;

Let's say that I will have Projects, Contracts and Widgets main contents and I need to use the ContentHeader inside.

For each main content I will have a different title label, which I can pass by props, since is just one level deep. But also, I will have different requests for each button inside the ContentHeader component, related to the main content that it belongs.

So, how can I pass these different requests to the buttons related to my main content? Props as well? What about if I have a deeper component tree?

PS: As an example I used NavLink and a simple onClick inside my button components with a flag CUSTOM_REQUEST

Thanks!

Answer 1

If I understand your question correctly, you need to be able to pass a specific request to the respective ContentHeader component based on the type of content.

You can definitely just pass that request function via props to the child button of that page/content component.

import React from 'react';
import Title from 'components/Title';
import BtnSearch from 'components/BtnSearch';
import BtnNew from 'components/BtnNew';

class ContentHeader extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    const { myRequestFunc } = this.props
    //...or if not es15
    var myRequestFunc = this.props.myRequestFunc

    return (
      <div className='content-header'>
        <Title name={this.props.title} />

        <ul className='actions'>
          <li className='action-item'>
            <BtnSearch />
          </li>
          <li className='action-item'>
            <BtnNew requestFunc={myRequestFunc} />
          </li>
        </ul>
      </div>
    );
  }
}

export default ContentHeader;

That is the easy way, anyhow. You could - depending on the size of your application - explore Redux, React-Redux and Redux-Thunk or Redux-Saga to avoid the inevitable passing of props down several levels. Checkout using redux with react