Author: John Au-Yeung

Sometimes, we want to only allow numbers to be inputted in an input box in a React component.

In this article, we’ll look at how to only allow numbers to be inputted in an input box in a React component.

Only Allow Numbers to be Inputted in React

We can set the pattern attribute to the regex string we want for restricting the input to numbers.

For instance, we can write:

<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.goal} />

We specified the pattern and we listen to the inpurt pro.

Then in the handleChange method, we can write:

handleChange(evt) {
  const goal = (evt.target.validity.valid) ?
  evt.target.value : this.state.goal;
  this.setState({ goal });
}

We only set the state if it’s valid, then we won’t get any invalid input in the state.

Conclusion

We can set the pattern attribute to the regex string we want for restricting the input to numbers.

Sometimes, we may encounter the ‘ Failed form propType: You provided a checked prop to a form field without an onChange handler.’ warning when we’re developing React components.

In this article, we’ll look at how to fix the ‘ Failed form propType: You provided a checked prop to a form field without an onChange handler.’ warning when we’re developing React components.

Fix ‘ Failed form propType: You provided a checked prop to a form field without an onChange handler.’ Warning

To fix this warning, we can add the checked prop with a value if we’re creating a controller component.

For instance, we can write:

<input
  type="checkbox"
  checked={this.props.checked}
  onChange={this.onChange}
/>

If it’s an uncontrolled component, we can write populate the defaultChecked prop:

<input
  type="checkbox"
  defaultChecked={this.props.checked}
/>

Conclusion

To fix the ‘ Failed form propType: You provided a checked prop to a form field without an onChange handler.’ warning, we can add the checked prop with a value if we’re creating a controller component.

Sometimes, we want to allow users to select the same file more than once in a React component.

In this article, we’ll look at how to allow users to select the same file more than once in a React component.

Allow File Input to Select the Same File in React Component

We can let a file input select the same file in a React component if we set it to null after we click on it.

For instance, we can write:

<input
  id="upload"
  ref="upload"
  type="file"
  accept="image/*"
  onChange={(event)=> {
    this.readFile(event)
  }}
  onClick={(event)=> {
    event.target.value = null
  }}
/>

We have the onChange prop that takes a function to read a file.

In the onClick prop, we set the file input value to null .

Passing a Number to a Component

We can pass a number to a component by passing in a number in curly brackets.

For instance, we can write:

Rectangle width={10} height={20} />

Conclusion

We can let a file input select the same file in a React component if we set it to null after we click on it.

Sometimes, we want to render child components in a stateless React function component with TypeScript.

In this article, we’ll look at how to render child components in a stateless React function component with TypeScript.

Use Children with React Stateless Functional Component in TypeScript

We can pass in the interface or type alias into the generic type argument of React.FunctionComponent to set the type for ur props.

As long as the alias or interface has the children prop, we can use the children prop.

For instance, we can write:

const Foo: React.FunctionComponent<FooProps> = props => (
  <div>
    <p>{props.bar}</p>
    <p>{props.children}</p>
  </div>
);

FooProps has the bar and children entries, so we can reference both in our component.

React.FC is the shorthand for React.FunctionComponent .

Before React 16.8, we use the React.StatelessComponent type instead.

For instance, we can write:

const Foo: React.StatelessComponent<{}> = props => (
  <div>{props.children}</div>
);

or:

const Foo : React.StatelessComponent<FooProps> = props => (
  <div>
    <p>{props.propInMyProps}</p>
    <p>{props.children}</p>
  </div>
);

React.SFC is the shorthand for React.StatelessComponent.

Conclusion

We can pass in the interface or type alias into the generic type argument of React.FunctionComponent to set the type for ur props.

As long as the alias or interface has the children prop, we can use the children prop.