React Bar Chart

Create a Bar Chart with provided array

by nabendu

HTML

<div id="app"></div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

React

var arrData = [
[1, 10],
[2, 20],
[3, 40],
[4, 80]
];

const RenderBox = props => {
    const fullStyle = {
        width: '30px',
        height: props.height + 'px',
        backgroundColor: 'blue'
    }
    return (
        <div style={fullStyle} />
    );
}

    
const BarChart = () => {
  const displayBar = arrData.map((item, key) => {
      return <IndividualBar height={item[1]} text={item[0]} key={key} />;
    });
  
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end' }}>{displayBar}</div>
  
  )
}

const IndividualBar = (props) => {
  const barHeight= props.height;
  return (
    <div style={{ margin:'4px' }}>
      <RenderBox height={barHeight} />
      <div>{props.text}</div>
    </div>
  )
}
    

ReactDOM.render(<BarChart />, document.getElementById("app"))