CODEWITHSUNDEEP
javascriptreactjsreact-proptypes
Andrzej Marciniak
Andrzej Marciniak

Reputation: 249

How to define PropTypes for attribute style in Reactjs

I want to pass 'style' attribute into my component with use JSX syntax. 

<InputTextWithValidation id="name" 
                         style={{width:'100%'}} .../>

How should I define in my InputTextWithValidation component PropTypes? I tried either as an object or a string, eg. 

InputTextWithValidation.propTypes = {
         style:PropTypes.object, ...
   }

but the result was the same: Warning on Chrome console:

Failed prop type: Invalid prop `style` of type `object` supplied to `InputTextWithValidation`, expected `string`.

Upvotes: 3

Views: 4887

Answers (1)

Paolo Dell&#39;Aguzzo
Paolo Dell&#39;Aguzzo

Reputation: 1431

Ensure that you are declaring the style prop only one time. Even if I need more code to understand where is the problem I have decided to create a jsfiddle for you.

As you can see the Hello class renders the InputTextWithValidation with the style prop which contains an object:

style={{width:'100%', background:'red'}}

Check the code below, you can run the code snippet.

class InputTextWithValidation extends React.Component{
	render(){
  	return(
    	<input id = {this.props.id} style = {this.props.style}/>
    );
  }
}

InputTextWithValidation.propTypes = {
  style:PropTypes.object
}


class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name} <InputTextWithValidation id="name" style={{width:'100%', background:'red'}}/></div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Upvotes: 1

Related Questions