Q:

Trying to hide  tags by default with state react es6

I have the following static view:
import React from 'react';

export default class Champ extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.champ.file} />
        <p>Name: {this.props.champ.name } </p>
        <p>Role: { this.props.champ.role } </p>
        <p>Difficulty: { this.props.champ.diff } </p>
        <p>Price: { this.props.champ.price } </p>
      </div>
    )
  }
}

I want to change it so that only the images are visible when the page is loaded and when they are hovered over the information will fade in.
I want to do this by having all the <p> tags that contain the info to be hidden by default when the page opens and do it with state. 
I thought I could do something like making them into a const
const x = <p>Name: {this.props.champ.name } </p>
    <p>Role: { this.props.champ.role } </p>
    <p>Difficulty: { this.props.champ.diff } </p>
    <p>Price: { this.props.champ.price } </p>

this.state = { x.style.visibilty = 'hidden'};

}
But I'm actually unsure of how to do this. I'm only now learning state and I've never used hidden before. Thank you.

A:

State should express the state but not hold rendered content. So you just need a detailsVisible flag or something in state which you toggle onMouseEnter and onMouseLeave using setState({ detailsVisible: true | false }), then you can use this.state.detailsVisible to render out the <p> tags or not. To show and hide them all together it would be convenient to put them in a wrapper element or component and toggle the visibility of it using an expression:
class Champ extends React.Component {
  state = { detailsVisible: false };
  handleMouseEnter = e => this.setState({ detailsVisible: true });
  handleMouseLeave = e => this.setState({ detailsVisible: false });
  render() {
    return (
      <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
        <img src={this.props.champ.file} />
        { this.state.detailsVisible && <ChampDetails champ={this.props.champ} /> }
      </div>
    )
  }
}

const ChampDetails = ({champ}) => (
  <div>
    <p>Name: { champ.name } </p>
    <p>Role: { champ.role } </p>
    <p>Difficulty: { champ.diff } </p>
    <p>Price: { champ.price } </p>
  </div>
);

^ Requires class properties, otherwise put the class property assignments (state, handleMouseEnter, and handleMouseLeave) in a constructor.

