Author: John Au-Yeung

Sometimes, we want to listen for mouse wheel events in React.

In this article, we’ll look at how to listen for mouse wheel events in React.

How to listen for mouse wheel events in React?

To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div style={{ height: 600, width: 300 }} onWheel={(e) => console.log(e)}>
        hello world
      </div>
    </>
  );
}

We set onWheel to a function that logs the event object.

Now when we scroll up and down with the mouse wheel, we should see the event object logged.

Conclusion

To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

Sometimes, we want to update an object in a React component state.

In this article, we’ll look at how to update an object in a React component state.

How to update an object in a React component state?

To update an object in a React component state, we can manipulate the state object with object spread.

For instance, we write:

import React, { useState } from "react";

const u = {
  1: { id: 1, name: "John" },
  2: { id: 2, name: "Jim" },
  3: { id: 3, name: "James" }
};
export default function App() {
  const [users, setUsers] = useState(u);

  const addUser = () => {
    setUsers((u) => {
      return {
        ...u,
        [Object.keys(u).length + 1]: {
          id: Object.keys(u).length + 1,
          name: "Mary"
        }
      };
    });
  };

  return (
    <>
      <button onClick={addUser}>add user</button>
      {Object.entries(users).map(([, val]) => {
        const { id, name } = val;
        return <p key={id}>{name}</p>;
      })}
    </>
  );
}

We have the u object with some user data.

And we set u as the initial value of the users state.

Then we define the addUser function that calls setUsers with a function that returns an object with the new user entry with the key set to Object.keys(u).length + 1.

Object.keys(u) returns an array of object keys.

Then we set addUser as the value of the onClick prop of the button.

Finally, we render the entries in users with:

Object.entries(users).map(([, val]) => {
  const { id, name } = val;
  return <p key={id}>{name}</p>;
})

Now when we click add user, we see new entries displayed.

Conclusion

To update an object in a React component state, we can manipulate the state object with object spread.

Sometimes, we want to play local video with React’s react-player library.

In this article, we’ll look at how to play local video with React’s react-player library.

How to play local video with React’s react-player library?

To play local video with React’s react-player library, we can add a file input that accepts a file.

Then we can convert the file object obtained to a file path that can be used with react-player.

For instance, we write:

import React, { useState } from "react";
import ReactPlayer from "react-player";

export default function App() {
  const [videoFilePath, setVideoFilePath] = useState(null);

  const handleVideoUpload = (event) => {
    const [file] = event.target.files;
    setVideoFilePath(URL.createObjectURL(file));
  };

  return (
    <>
      <input type="file" onChange={handleVideoUpload} />
      <ReactPlayer url={videoFilePath} width="100%" height="100%" controls />
    </>
  );
}

We define the videoFilePath state with useState.

Then we define the handleVideoUpload function that gets the file from the e.target.files object.

Next, we convert file to a video path that can be used with reacy-player with URL.createObjectURL.

Then we set url to videoFilePath.

Now when we select a video file from the file input, then we’ll see the video file displayed.

Conclusion

To play local video with React’s react-player library, we can add a file input that accepts a file.

Then we can convert the file object obtained to a file path that can be used with react-player.

Sometimes, we want to uncheck radio buttons in React.

In this article, we’ll look at how to uncheck radio buttons in React.

How to uncheck radio buttons in React?

To uncheck radio buttons in React, we can set the checked prop of the radio button to false.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState({ apple: true, orange: false });

  const changeRadio = (e) => {
    setChecked(() => {
      return {
        apple: false,
        orange: false,
        [e.target.value]: true
      };
    });
  };

  return (
    <>
      <button
        onClick={() => setChecked(() => ({ apple: false, orange: false }))}
      >
        uncheck
      </button>
      <label>
        <input
          type="radio"
          checked={checked.apple}
          value="apple"
          name="choice"
          onChange={changeRadio}
        />
        apple
      </label>

      <label>
        <input
          type="radio"
          checked={checked.orange}
          value="orange"
          name="choice"
          onChange={changeRadio}
        />
        orange
      </label>
    </>
  );
}

We have the checked state that we use to set the checked prop of each radio button.

Then we set onChange to the changeRadio function.

In changeRadio, we call setChecked with a function that sets apple and orange both to false.

Then we set the radio button that we clicked on to be checked by adding [e.target.value]: true.

We also add a button that calls setChecked with a function that returns { apple: false, orange: false } to uncheck both checkboxes.

Finally, we set the checked prop of each radio button to the property of the checked state to update the checked value.

Now when we click the uncheck button, both radio buttons should be unchecked.

Conclusion

To uncheck radio buttons in React, we can set the checked prop of the radio button to false.

Sometimes, we want to uncheck a checkbox programmatically in React.

In this article, we’ll look at how to uncheck a checkbox programmatically in React.

How to uncheck a checkbox programmatically in React?

To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      <button onClick={() => setChecked((c) => !c)}>toggle</button>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    </>
  );
}

We have the checked state that we used to set the checked prop of the checkbox.

Then we add a button that calls setChecked to toggle the checked value when we click the button.

Next, we set the onChange prop to a function that calls setChecked with e.target.checked to update the checkbox’s checked value by setting the checked state.

e.target.checked has the latest checked value of the checkbox.

Therefore, when we click toggle, we see the checkbox toggle between checked and unchecked.

And we can also check and uncheck the checkbox by clicking the checkbox.

Conclusion

To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state.