Dynamic header child component in react/redux application

Question

I'm building a react application where the header changes based on the routes, but also depending of the state of other components.

I'm looking for a way to control the header from child components.

For example, I would like that when I click on a button in the main page the header would append new components.

Is there a way to achieve this while avoiding multiple if statements in the header ?

I'm late, but you should probably take a look at this question: https://stackoverflow.com/questions/33062830/using-react-router-with-a-layout-page-or-multiple-components-per-page — Finickyflame, May 29 '17 at 15:59

Arjun Hariharan · Accepted Answer · 2016-09-29T04:48:41.423

Have a variable in your state which contains the content to be appended to the header. React takes care of reloading all the components when there is a change in the state.

Ex - App.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { appendHeaderDemo } from 'redux/demo.js'

class ChildComponent1 extends Component {
  render() {
    return <h3>Child component 1 added to header</h3>
  }
};

class ChildComponent2 extends Component {
  render() {
    return <h3>Child component 2 added to header</h3>
  }
};

class App extends Component {
  render() {
    const { dispatch } = this.props

    return (
      <div className='container'>
        <h1> This is my header {this.props.appendToHeader} </h1>

        { this.props.appendToHeader == 'Button clicked' &&
          <ChildComponent1 />
        }

        { this.props.appendToHeader == 'Some Other State' &&
          <ChildComponent2 />
        }

        <button type="button" onClick={ () => onButtonClick() }> Change Header Content </button>

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  };
}

function mapStateToProps(state) {
  const { appendToHeader } = state

  return {
    appendToHeader
  }
}

export default connect(mapStateToProps, { onButtonClick: appendHeaderDemo })(App)

redux/demo.js -

export const CHANGE_HEADER_CONTENT = 'CHANGE_HEADER_CONTENT'

const initialState = {
  appendToHeader: ''
};

// Reducer
export default function appendHeader(state = initialState, action) {
  switch (action.type) {
    case CHANGE_HEADER_CONTENT:
      return Object.assign({}, state, {
        appendToHeader: 'Button clicked'
      })
    default:
      return state
  }
}

// Actions
export function appendHeaderDemo() {
  return {
    type: CHANGE_HEADER_CONTENT
  }
}

Dispatch function appendHeaderDemo can be called from any child and the corresponding changes will be reflected in the header (if there is a change in the state attribute appendToHeader)

Thank you for your answer, I was actually looking for appending _component_ to the header on action triggered by `container`s child component. How do you think I can be able to achieve that ? — Slakk, Sep 28 '16 at 21:55
Check the last edit. I added 2 child components which gets displayed according to the state. I don't know if you can avoid multiple if conditions though. I hope this is what you are looking for. — Arjun Hariharan, Sep 29 '16 at 04:50

Dynamic header child component in react/redux application

1 Answers1