Category: React Answers

Sometimes, we want to reset a file input’s value in React.

In this article, we’ll look at how to reset a file input’s value in React.

Reset a File Input’s Value in React

To reset a file input’s value in React, we can set the value property of the file input to an empty string.

For instance, we can write:

import React, { useRef } from "react";

export default function App() {
  const ref = useRef();

  const reset = () => {
    ref.current.value = "";
  };

  return (
    <>
      <input type="file" ref={ref} />
      <button onClick={reset}>reset</button>
    </>
  );
}

We call the useRef hook to create a ref object.

And we assign that to the file input with the ref prop.

Next, we add a button that calls the reset function when we click it.

And in the reset function, we set ref.current.value to an empty string.

ref.current is the file input element since we passed ref to the ref prop.

Conclusion

To reset a file input’s value in React, we can set the value property of the file input to an empty string.

Sometimes, we may encounter the “Warning: Use the ‘defaultValue’ or ‘value’ props on <select> instead of setting ‘selected’ on <option>” error message when we’re developing React apps.

In this article, we’ll look at how to fix the “Warning: Use the ‘defaultValue’ or ‘value’ props on <select> instead of setting ‘selected’ on <option>” error message when we’re developing React apps.

Fix the “Warning: Use the ‘defaultValue’ or ‘value’ props on <select> instead of setting ‘selected’ on <option>” Error Message in React

To fix the “Warning: Use the ‘defaultValue’ or ‘value’ props on <select> instead of setting ‘selected’ on <option>” error message when we’re developing React apps, we should set the defaultValue prop to the value attribute value of the default option.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <select defaultValue="">
      <option value="" disabled>
        Choose a salutation ...
      </option>
      <option value="1">Mr</option>
      <option value="2">Mrs</option>
      <option value="3">Ms</option>
      <option value="4">Miss</option>
      <option value="5">Dr</option>
    </select>
  );
}

to set the defaultValue prop to an empty string, which matches the value attribute of the first option.

If defaultValue value matches the value attribute value of an option element, then that one will be selected by default.

This should be used instead of adding the selected attribute onto the option element that we want to select by default.

Conclusion

To fix the “Warning: Use the ‘defaultValue’ or ‘value’ props on <select> instead of setting ‘selected’ on <option>” error message when we’re developing React apps, we should set the defaultValue prop to the value attribute value of the default option.

Sometimes, we want to add custom HTML attributes in React.

In this article, we’ll look at how to add custom HTML attributes in React.

Add Custom HTML Attributes in React

To add custom HTML attributes in React, we can just add them as we do with regular HTML element attributes.

For instance, we can write:

import React from "react";

export default function App() {
  return <div custom-attribute="some-value" />;
}

We just add the custom-attribute custom attribute and it’ll be rendered in the HTML.

This works since React 16.

Conclusion

To add custom HTML attributes in React, we can just add them as we do with regular HTML element attributes.

Sometimes, we may see the “<tr> cannot appear as a child of <div>” error in React when we wrap a div around a table row.

In this article, we’ll look at how to fix the “<tr> cannot appear as a child of <div>” error in React.

Fix the “<tr> Cannot Appear as a Child of <div>” Error

To fix the “<tr> cannot appear as a child of <div>” error in React, we should remove the wrapper div.

For instance, we can write:

import React from "react";

const data = [
  { firstName: "jane", lastName: "smith" },
  { firstName: "john", lastName: "doe" },
  { firstName: "may", lastName: "wong" }
];

const Rows = data.map((d) => {
  return (
    <tr key={d.firstName}>
      <td>{d.firstName}</td>
      <td>{d.lastName}</td>
    </tr>
  );
});

export default function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>first name</th>
          <th>last name</th>
        </tr>
      </thead>
      <tbody>{Rows}</tbody>
    </table>
  );
}

to create the Rows array, which has the JSX for the tr elements that we created by mapping them from the data array with map .

Then we pass that straight into the tbody to render the array of table rows.

Conclusion

To fix the “<tr> cannot appear as a child of <div>” error in React, we should remove the wrapper div.

Sometimes, we want to capture the last character of text entered with onChange in React.

In this article, we’ll look at how to capture the last character of text entered with onChange in React.

Capture the Last Character of Text Entered with onChange in React

To capture the last character of text entered with onChange in React, we can use the useEffect hook to watch for the entered value.

For instance, we can write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  useEffect(() => {
    console.log(name);
  }, [name]);

  return <input onChange={(e) => setName(e.target.value)} />;
}

We set the onChange to a function that calls setName with the e.target.value property, which has the value entered into the input.

Then we watch the name state for changes with the useEffect hook with an array with the name state inside as the 2nd argument.

Then we log the name value in the callback.

The console log should should the whole string that’s been entered

Conclusion

To capture the last character of text entered with onChange in React, we can use the useEffect hook to watch for the entered value.