Passing props to another component in React.js

Question

I have a component like below

import React, { Component } from 'react';

class InputText extends Component  {
  render = () => {    
    return (
      <div>
        {this.props.label}
        <input type="text" name={this.props.name} id={this.props.id} class={this.props.class} required={this.props.extraValue}/>
      </div>
    )
  }
}

export default InputText

I am using above component like below

<InputText name="paper" class="pen" id="mouse" extraValue="required"/>

I am getting output like below

<input type="text" name="paper" id="mouse" class="pen" required="">

Why the extraValue value is not working ?

Answer 1

required is a Boolean . You should pass it like this

<InputText name="paper" class="pen" id="mouse" extraValue={true} />

Or

<InputText name="paper" class="pen" id="mouse" extraValue />