How to make inline style use state in React?

Question

I want the display of my elements to be none. So i use inline style in the React element to make display: none. Then after setTimeout runs, the display goes to an empty string, so that my content shows. But my display is always an empty string. The state is not being passed to the inline style, so the value none is never assigned. How can I pass state to inline styles?

I tried style={{display:`${this.state.hidden}`}} and style={{display: this.state.hidden}}

class Home extends Component{
    state={
        hidden: 'none'
      }

      showHello=()=>{
          this.setState({
              hidden: ''
          })
      }

        showName=()=>{
        this.setState({
            hidden: ''
        })
    }

    showFullStack=()=>{
        this.setState({
            hidden: ''
        })
    }

    componentDidMount(){
      setTimeout(()=>this.showHello(), 2500);
      setTimeout(() => this.showName(), 20000);
      setTimeout(() =>  this.showFullStack(), 10000);
    }

    render(){
      return(
    <div className='home-div'>
        <h2 className='hello-header'  style={{display:`${this.state.hidden}`}}>Hello, I'm</h2>
        <h2 className='name-header'  style={{display:`${this.state.hidden}`}}>Sean</h2>
        <h2 className='full-stack-header' style={{display: this.state.hidden}}>I'm a Full Stack Web Developer.</h2>
        <a className='resume'>Download my resume here!</a>
        <a className='github'>View my GitHub here!</a>
        <h1 className='arrow'>&#x21E9;</h1>
    </div>

Any help is appreciated, I am somewhat new to React, so if this is a novice mistake, forgive me.

Thank you!

Answer 1

Try this : Your code will work.

    render(){
const { hidden } = this.state;
          return(
        <div className='home-div'>
            <h2 className='hello-header'  style={{ display:  hidden }}>Hello, I'm</h2>
            <h2 className='name-header'  style={{ display:  hidden }}>Sean</h2>
            <h2 className='full-stack-header' style={{ display:  hidden }}>I'm a Full Stack Web Developer.</h2>
            <a className='resume'>Download my resume here!</a>
            <a className='github'>View my GitHub here!</a>
            <h1 className='arrow'>&#x21E9;</h1>
        </div>

    )}
    }

Answer 2

If you want to conditionally show items, i would use an array and check the value.

See it live!

const displayMap = {
  false: 'none',
  true: 'block'
}

class Home extends Component {
  state = {
    display: []
  }

  showMessage = (name) => {
    this.setState({
        display: [...this.state.display, name]
    })
  }

  componentDidMount(){
    setTimeout(()=> this.showMessage('hello'), 2500);
    setTimeout(() => this.showMessage('name'), 20000);
    setTimeout(() =>  this.showMessage('full-stack'), 10000);
  }

  render(){
    const { display } = this.state
    return(
      <div className='home-div'>
        <h2 className='hello-header' style={{display: displayMap[display.indexOf('hello') >= 0]}}>Hello, I'm</h2>
        <h2 className='name-header' style={{display: displayMap[display.indexOf('name') >= 0]}}>Sean</h2>
        <h2 className='full-stack-header' style={{display: displayMap[display.indexOf('full-stack') >= 0]}}>I'm a Full Stack Web Developer.</h2>
        <a className='resume'>Download my resume here!</a>
        <a className='github'>View my GitHub here!</a>
        <h1 className='arrow'>&#x21E9;</h1>
      </div>
    )
  }
}