CODEWITHSUNDEEP
javascriptreactjs
Sue-May Xu
Sue-May Xu

Reputation: 500

ReactJs: fontSize does not change when calling it from a font change method

I wrote a very simple reactJs Code. I set fontSize as my state. I want to change my fontSize while I change the input value. But it does not work. Could anyone help? Thanks in advance.

Here is my js code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

    class Test extends React.Component{
       constructor(props){
          super(props)
          this.state={
              fontSize:64
          }
       }
       changeSize(event){
        this.setState({
            fontSize:event.target.value
        });
      }

      render(){
          let styleobj = {background:"blue",fontSize:64}
          return(
              <section style={styleobj}>
              <h2 className="tryout" style={{fontSize:this.state.fontSize}}>{this.state.fontSize}</h2>
              <input value={this.state.fontSize} onChange={this.changeSize.bind(this)}/>
              </section>
          );

      }
    }


    ReactDOM.render(<Test name="Sumei" value="123"/>,document.getElementById("root"));

Upvotes: 5

Views: 16576

Answers (1)

Liam
Liam

Reputation: 6743

You need to specify the value of font size (em, px, rem, % ...)

  render() {
    let styleobj = { background: "blue", fontSize: 64 }
    return (
      <section style={styleobj}>
        <h2 className="tryout" style={{fontSize: this.state.fontSize+'px'}}>{this.state.fontSize}</h2>
        <input value={this.state.fontSize} onChange={this.changeSize.bind(this)} />
      </section>
    );

  }
}

Edit w2p3kwmv15

Upvotes: 10

Related Questions