Q:

TypeError: Cannot read property 'opacity' of null

I'm trying to implement opacity changes when hovering over the legend in React recharts: https://jsfiddle.net/alidingling/1p40zzfe/
However, I'm always getting the error: TypeError: Cannot read property 'opacity' of null. Is there a reason why? Its the Legend component that has the lines "OnMouseEnter" and "OnMouseLeave" that causes the problem.
Thanks
class EducationPageRouter extends React.Component{
  getInitialState() {
    return {
        opacity: {
        car: 1,
        phone: 1,
      },
    };
  }

  handleMouseEnter(o) {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
        opacity: { ...opacity, [dataKey]: 0.5 },
    });
  }

  handleMouseLeave(o) {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
        opacity: { ...opacity, [dataKey]: 1 },
    });
  }

  render() {
    const { opacity } = this.state;

    return (

      <Card>
        <CardContent>
          <Typography variant="title" color="primary" gutterBottom="true">
            Sales Information Display
          </Typography>
          <Typography variant="header1" color="primary" gutterBottom="true">
            Line Graph - Number of Sales to Date Time
          </Typography>
          <Button variant="raised" color="primary">
            Switch
          </Button>

          <ResponsiveContainer width="95%" aspect={9.5/3.8}>
            <LineChart
              data={formattedSales}
              margin={{ top:5, right:10, bottom:5, left:20 }}
            >
              <XAxis
                dataKey="date"
                padding={{ left:0, right:50 }}
                style={{ fontFamily: "Roboto, sans-serif" }}
                tick={{ fontSize: "12.5px"}}
              />
              <YAxis
                dataKey="car"
              />
              <CartesianGrid
                stroke="#f5f5f5"
                strokeDasharray="2.5 2.5"
              />
              <Tooltip
                wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
              />

              <Legend
                onMouseEnter={this.handleMouseEnter} 
                onMouseLeave={this.handleMouseLeave}
                wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
                verticalAlign="bottom"
                height={40}
              />

              <Line
                type="monotone"
                dataKey="car"
                stroke="#4169e1"
              />
              <Line
                type="monotone"
                dataKey="phone"
                stroke="#fa8072"
              />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    )
  }
}

A:

getInitialState can only be used with createReactClass, so your state will be null. You can set the initial state in the constructor instead, or use a class property.
Your event handlers handleMouseEnter and handleMouseLeave are not bound, so this will not be what you expect inside of them. One way around this is to bind them to this in the constructor, or make them into property initialized arrow functions.
class EducationPageRouter extends React.Component {
  state = {
    opacity: {
      car: 1,
      phone: 1,
    }
  };

  handleMouseEnter = o => {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
      opacity: { ...opacity, [dataKey]: 0.5 }
    });
  };

  handleMouseLeave = o => {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
      opacity: { ...opacity, [dataKey]: 1 }
    });
  };

  // ...
}

