Category: React Answers

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.

Sometimes, we want to prevent form submission with React.

In this article, we’ll look at how to prevent form submission with React.

How to prevent form submission with React?

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

For instance, we write

<form onSubmit={(e) => e.preventDefault()}>
  <button onClick={handleClick}>Click Me</button>
</form>;

to add a form with the onSubmit prop set to a function that calls e.preventDefault to prevent form submission.

We set the button’s onClick prop to the handleClick function to run it when we click the button.

Conclusion

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

Sometimes, we want to access store state in React Redux and JavaScript.

In this article, we’ll look at how to access store state in React Redux and JavaScript.

How to access store state in React Redux and JavaScript?

To access store state in React Redux and JavaScript, we can use the useSelector hook.

For instance, we write

import { useSelector } from "react-redux";

export const useEmployees = () => {
  return useSelector((state) => state.employees);
};

to create the useEmployees hook.

In it, we call the useSelector hook that select the employees state from the Redux store.

Then, we write

const Comp = () => {
  const { employees } = useEmployees();
  //...
};

to call the useEmployees hook in the Comp component to get the employees from the store.

Conclusion

To access store state in React Redux and JavaScript, we can use the useSelector hook.

Sometimes, we want to set port in Next.js.

In this article, we’ll look at how to set port in Next.js.

How to set port in Next.js?

To set port in Next.js, we can use the -p option.

For instance, in package.json, we write

{
  //...
  "scripts": {
    "dev": "next -p 8080"
  }
  //...
}

to add -p 8080 to the dev script command to run the Next.js project on port 8080.

Conclusion

To set port in Next.js, we can use the -p option.

Sometimes, we want to add favicon with React and Webpack.

In this article, we’ll look at how to add favicon with React and Webpack.

How to add favicon with React and Webpack?

To add favicon with React and Webpack, we can use the react-favicon library.

To install it, we run

npm install react-favicon

Then we use it by writing

import Favicon from "react-favicon";
//...

ReactDOM.render(
  <div>
    <Favicon url="/path/to/favicon.ico" />
  </div>,
  document.querySelector(".react")
);

to add the Favicon component and set the favicon location with the path prop.

Conclusion

To add favicon with React and Webpack, we can use the react-favicon library.