title: how to add dynamic css in react js
body: <p>can we achieve this in React js style={style} ??</p>
  
  <pre><code>constructor(props) {
     super(props);
     this.state = {
       style_title: {"color": "blue"}
     };
   this.change = this.change.bind(this);
  }
  
  change(e) { 
   this.setState({ 
     [e.target.name]: e.target.value }) 
  }
  </code></pre>
  
  <p><strong>My Form</strong>: </p>
  
  <pre><code>&lt;input type="text" name="title" value={this.props.title} onChange={e =&gt;this.changeEdit(e)} /&gt; 
  &lt;input type="text" name="style_title" value={this.props.style_title} onChange={e =&gt;this.changeEdit(e)} /&gt;  
  </code></pre>
  
  <p>title text print on preview mode for this I need to styles title dynamically using input field for ex: </p>
  
  <pre><code>{ "color": "blue", "font-size": "22px",} 
  </code></pre>
  
  <p>above styles should apply render <code>&lt;p style={style}&gt;{this.props.title }&lt;/p&gt;</code> in style attribute</p>
  
  <p><strong>Preview Section</strong>:</p>
  
  <pre><code>render = () =&gt; (
   const style = this.props.style_title; 
  
   return (
       &lt;p style={style}&gt;{this.props.title }&lt;/p&gt;
   );
  )
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZInSy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZInSy.png" alt="My form look this with preview mode"></a></p>