[Chartjs]-Passing the same props while rendering different elements conditionally in React.js

by

4👍

Two things:

  • Use stateless component, in your example you are not using state.
  • Use switch instead of if statements.

Your new component, ...chart are the destructured props. Read more about destructuring on MDN.

// Chart.js - new component

export const Chart = ({ type, ...chart }) => { 
  switch(type) {
    case 'line':
      return <Line {...chart} />
    case 'bar':
      return <Bar {...chart} />
    case 'pie':
      return <Pie {...chart} />
    default:
     return null;
  }
}

Example usage

// App.js 

render() {
  return (
    <div>
      <Chart type="line" options={optionsObject} whateverProp="whatever" />
      <Chart type="bar" options={optionsObject} whateverProp="whatever" />
      <Chart type="pie" options={optionsObject} whateverProp="whatever" />
    </div>
  )
}

0👍

import React, { Component } from 'react';

class Chart extends Component {
  components = {
    Line: Line,
    Bar: Bar,
    Pie: Pie
  };
  render() {
    const TagName = this.components[this.props.tag || 'Line'];
    return
      <TagName
        data={this.state.chartData}
        options={{
        title: {
          display: true,
          text: 'Cities I\'ve lived in',
          fontSize: 25
        },
        legend: {
          display: true,
          position: 'right',
          labels: {
            fontColor: '#000'
          }
        }
      }}
    />
  }
}
export default Chart;

// Call MyComponent using prop tag with required prop Line or Bar or Pie
<Chart tag='Line' />

NOTE:- You could create it as a stateless functional component as well.

0👍

I prefer to have each chart as a component, so you can do chart’s specific configuration in that component and your code will be more close to React codes modularity goal, so for Line chart as example:

class LineChart extends Component {

const chartLegend = {
            display: true,
            position: 'right',
            labels: {
              fontColor: '#000'
            }};

const chartTitle = {
            display: true,
            text: 'Cities I\'ve lived in',
            fontSize: 25
          };
const chartOptions = {
          title: chartTitle ,
          legend: chartLegend           
        }

  render(){
    return(
      <Line
        data={this.props.chartData}
        options={chartOptions }
      /> 
    );
  }
}

Now for chat Component as container component you can use switch case or guard conditions as @loelsonk also said, I prefer to have guard conditions besides switch:

class Chart extends Component {

  static propTypes = {
    type: PropTypes.string.isRequired
  }

  state = {
    chartData: {
      // some data here 
    }
  }

  render(){
    if (this.props.type === 'line')
      return <LineChart chartData={...}/>; 
    if (this.props.type === 'bar')
      return <BarChart chartData={...}/>;
    if (this.props.type === 'pie')
      return <PieChart chartData={...}/>;      
  }
}

this way you can easily replace any chart implementation any time that needed.

Leave a comment