Category: React

Sometimes, we want to update and merge state object using React useState hook.

In this article, we’ll look at how to update and merge state object using React useState hook.

How to update and merge state object using React useState hook?

To update and merge state object using React useState hook, we can call the state setter function with a callback that returns the new object state value.

For instance, we write

const Comp = () => {
  const [state, setState] = useState({ fName: "", lName: "" });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setState((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <>
      <input
        value={state.fName}
        type="text"
        onChange={handleChange}
        name="fName"
      />
      <input
        value={state.lName}
        type="text"
        onChange={handleChange}
        name="lName"
      />
    </>
  );
};

to define the handleChange in the Comp component that calls setState with a callback that return an object with the prevState properties and the new property values.

We set the onChange prop to handleChange to get the input value from e.target.value and the name attribute value of the input from e.target.name.

Conclusion

To update and merge state object using React useState hook, we can call the state setter function with a callback that returns the new object state value.

Sometimes, we want to add CSS pseudo elements in React.

In this article, we’ll look at how to add CSS pseudo elements in React.

How to add CSS pseudo elements in React?

To add CSS pseudo elements in React, we add real elements.

For instance, we write

<div>
  <span>Something</span>
  <div
    style={{ position: "absolute", WebkitFilter: "blur(10px) saturate(2)" }}
  />
</div>

in our React component, which is equivalent to

<div class="something"><span>Something</span></div>
<style>
  .something::after {
    content: "";
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
  }
</style>

in regular HTML and CSS.

.something::after selects the div after the span in the React component.

-webkit-filter is replaced with WebkitFilter in React.

Conclusion

To add CSS pseudo elements in React, we add real elements.

Sometimes, we want to set multipart in Axios with React.

In this article, we’ll look at how to set multipart in Axios with React.

How to set multipart in Axios with React?

To set multipart in Axios with React, we can submit a FormData object when making the request.

For instance, we write

const Comp = () => {
  const [file, setFile] = useState();

  const fileUpload = (file) => {
    const url = "http://example.com/file-upload";
    const formData = new FormData();
    formData.append("file", file);
    const config = {
      headers: {
        "content-type": "multipart/form-data",
      },
    };
    return post(url, formData, config);
  };

  const onFormSubmit = (e) => {
    e.preventDefault();
    const { data } = await fileUpload(file);
  };

  const onChange = (e) => {
    setFile(e.target.files[0]);
  };

  return (
    <form onSubmit={onFormSubmit}>
      <h1>File Upload</h1>
      <input type="file" onChange={onChange} />
      <button type="submit">Upload</button>
    </form>
  );
};

to create the Comp component.

In it, we define the file state with useState.

Then we define the fileUpload function that creates a FormData object.

Next, we add the file object into the FormData object with append.

And then we make the request with the Axios post method with the url, formData object and the config that has the headers that sets content-type header to multipart/form-data.

Next, we define the onFormSubmit function that calls preventDefauly to stop the default form submit behavior.

And then we call fileUpload to upload the file.

Finally, we render a form element with a file input in it.

When the file selection is changed, onChange is called.

And onFormSubmit is called when we click Upload.

Conclusion

To set multipart in Axios with React, we can submit a FormData object when making the request.

Sometimes, we want to retrieve value from select with multiple option in React.

in this article, we’ll look at how to retrieve value from select with multiple option in React.

How to retrieve value from select with multiple option in React?

To retrieve value from select with multiple option in React, we can get the selected options from the element’s selectedOptions property.

For instance, we write

const Comp = () => {
  const [arrayOfOptionValues, setArrayOfOptionValues] = useState();

  const onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map((opt) => opt.value);
    setArrayOfOptionValues(values);
  };

  //...

  return (
    <select multiple value={arrayOfOptionValues} onChange={handleChange}>
      <option value={1}>First option</option>
      <option value={2}>Second option</option>
      <option value={3}>Third option</option>
    </select>
  );
};

to define the arrayOfOptionValues state with the useState hook.

Then we add the onSelectChange function that gets the selected options from e.target.selectedOptions.

We then spread that into an array and call map to get the values.

Next, we call setArrayOfOptionValues to set the values as the value of arrayOfOptionValues.

Finally, we add a select element that takes multiple values and set the value prop to arrayOfOptionValues and the onChange prop to the handleChange function.

Then then selected options are set as the value of arrayOfOptionValues when they change.

Conclusion

To retrieve value from select with multiple option in React, we can get the selected options from the element’s selectedOptions property.