30 seconds of React

Input

Click on a snippet's name to view its code.

ControlledInput

Renders an <input> element with internal state, that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Use the React.setState() hook to create the value state variable and give it a value of equal to the defaultValue prop.
  • Use the React.useEffect() hook with a second parameter set to the value state variable to call the callback function every time value is updated.
  • Render an <input> element with the appropriate attributes and use the the onChange event to upda the value state variable.

LimitedTextarea

Renders a textarea component with a character limit.

  • Use the React.useState() hook to create the content state variable and set its value to value. Create a method setFormattedContent, which trims the content of the input if it's longer than limit.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

LimitedWordTextarea

Renders a textarea component with a word limit.

  • Use the React.useState() hook to create the content and wordCount state variables and set their values to value and 0 respectively.
  • Create a method setFormattedContent, which uses String.prototype.split(' ') to turn the input into an array of words and check if the result of applying Array.prototype.filter(Boolean) has a length longer than limit.
  • If the afforementioned length exceeds the limit, trim the input, otherwise return the raw input, updating content and wordCount accordingly in both cases.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

MultiselectCheckbox

Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

  • Use React.setState() to create a data state variable and set its initial value equal to the options prop.
  • Create a function toggle that is used to toggle the checked to update the data state variable and call the onChange callback passed via the component's props.
  • Render a <ul> element and use Array.prototype.map() to map the data state variable to individual <li> elements with <input> elements as their children.
  • Each <input> element has the type='checkbox' attribute and is marked as readOnly, as its click events are handled by the parent <li> element's onClick handler.

PasswordRevealer

Renders a password input field with a reveal button.

  • Use the React.useState() hook to create the shown state variable and set its value to false.
  • Use a<div> to wrap both the<input> and the <button> element that toggles the type of the input field between "text" and "password".

Select

Renders a <select> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <select> element.
  • Render a <select> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the textarea to the parent.
  • Use destructuring on the values array to pass an array of value and text elements and the selected attribute to define the initial value of the <select> element.

Slider

Renders a slider element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Render an <input> element of type "range" and the appropriate attributes, use the callback function in the onChange event to pass the value of the input to the parent.

TagInput

Renders a tag input field.

  • Define a TagInput component and use React.useState() hook to initialize an array with tags passed as props.
  • Use Array.prototype.map() on collected nodes to render the list of tags.
  • Define the addTags method, which will be executed on pressing the Enter key.
  • The addTags method uses the setTags method to add the new tag using the spread (...) operator to prepend the existing tags and adds the new tag at the end of the tags array.
  • Define the removeTags method, which will be executed on clicking the delete icon in the tag.
  • Use Array.prototype.filter() in removeTags method to remove the tag using the index of the tag to filter it out from tags array.

TextArea

Renders a <textarea> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <textarea> element.
  • Render a <textarea> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the textarea to the parent.

UncontrolledInput

Renders an <input> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Render an <input> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the input to the parent.