Category: React Answers

Sometimes, we want to fix the newlines character ignored by JSX tables issue with React.

In this article, we’ll look at how to fix the newlines character ignored by JSX tables issue with React.

How to fix the newlines character ignored by JSX tables issue with React?

To fix the newlines character ignored by JSX tables issue with React, we can set the white-space CSS property to pre in the cell.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <style>
        {`.pre-wrap {
          white-space: pre-wrap
        }`}
      </style>
      <table>
        <tbody>
          <tr>
            <td className="pre-wrap">
              {
                "Line 1\nLine 2\nLine 3\nThis is a cell with white-space: pre-wrap"
              }
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );
}

We have a string that have some new line characters between a few substrings.

To make them display in separate lines, we add the pre-wrap class which sets the white-space CSS property to pre-wrap.

And we set the className of the td to pre-wrap to apply the styles.

Now we should see that each line in the string are displayed on separate lines.

Conclusion

To fix the newlines character ignored by JSX tables issue with React, we can set the white-space CSS property to pre in the cell.

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.