unable add required attribute to a ReactJS input component

Question

I am attempting to add a required attribute to a react input component:

export default function UiInput() {
   render() {
   return (
    <input
     {...customAttributes}
     size={size ? size : null}
     value={inputValue}
     maxLength={maxLength}
     required={required}
    />
   )

and when I am calling my component like so,

<UiInput 
   required={required}
  />

I am not getting the red asterisk to render - not getting any errors when I pass in required to an input component, but no red asterisk is showing up, how can I make sure the asterisk renders for required inputs? Does ReactJS not support this?

Answer 1

Remember that you are passing required down as a prop to UiInput.

The pattern you're using for your Component is a Stateless Functional Component, when you do this:

• props gets passed through as a parameter.
• You don't need to declare the render() method, just simply write your return statement.

You can declare your Component like so:

function UiInput(props) {
      return (
        <input
         size={props.size ? props.size : null}
         required={props.required}
        />
      )
    }

And render it like so:

<UiInput required="required" />

You can see a JSFiddle here. Please be aware that I did remove some props for the purpose of this demo.

Here's the Component rendered, please ignore the data-reactroot attribute.