Category: React Answers

Sometimes, we want to map only a portion of an array with React.

In this article, we’ll look at how to map only a portion of an array with React.

How to map only a portion of an array with React?

To map only a portion of an array with React, we can use the JavaScript array’s slice method.

For instance, we write:

import React, { useState } from "react";

const items = ["Item A", "Item B", "Item C", "Item D"];

export default function App() {
  const [showMore, setShowMore] = useState();

  return (
    <div>
      <button onClick={() => setShowMore((s) => !s)}>toggle show more</button>
      {showMore
        ? items.map((it) => <p key={it}>{it}</p>)
        : items.slice(0, 2).map((it) => <p key={it}>{it}</p>)}
    </div>
  );
}

We have a button that toggles the showMore state when it’s clicked.

If showMore is true, then we call items.map with a callback to render all the content of items in their own p elements.

Otherwise, we call slice with 0 and 2 to only return an array with the first 2 elements.

And we call map with a callback to render each item.

Therefore, when we click toggle show more, we should see the list toggle between 2 and 4 items.

Conclusion

To map only a portion of an array with React, we can use the JavaScript array’s slice method.

To add a background video with React, we can add the loop, autoPlay and muted props to the video element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video autoPlay loop muted>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
      </video>
    </div>
  );
}

We have autoPlay loop muted added to the video element so that the video plays automatically, repeats when it finishes playing, and it’s muted respectively.

In it, we add the source element with the src attribute set to the URL of the video we want to play in the background.

We add the loop prop to make it restart when the video is finished playing.

The muted prop mutes the video.

As a result, we have a video that loops forever silently on the page.

Sometimes, we want to set selected value of a select drop down to null with React.

In this article, we’ll look at how to set selected value of a select drop down to null with React.

How to set selected value of a select drop down to null with React?

To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      <select
        onChange={(e) => setSelected(e.target.value || null)}
        value={selected || ""}
      >
        <option value=""></option>
        <option value="1">cook dinner</option>
        <option value="2">do dishes</option>
        <option value="3">walk dog</option>
      </select>
    </div>
  );
}

to set onChange to a function that calls setSelected to e.target.value which is the selected value if it’s truthy.

Otherwise, we set it to null.

Next, we set the value prop to selected if it’s truthy and an empty string otherwise.

Since null is falsy, value will be an empty string if selected is null, which matches the value attribute of the first choice.

As a result, when we select the first choice, the empty option will be displayed.

Conclusion

To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null.

Sometimes, we want to retrieve dynamic child key upon emission of an event with React.

In this article, we’ll look at how to retrieve dynamic child key upon emission of an event with React.

How to retrieve dynamic child key upon emission of an event with React?

To retrieve dynamic child key upon emission of an event with React, we can store the key as a data- attribute.

Then we can get the data- attribute value from the dataset property.

For instance, we write:

import React from "react";

const ChildComponent = ({ changeCallback, dataKey }) => {
  return (
    <div>
      <input type="text" onChange={changeCallback} data-key={dataKey} />
    </div>
  );
};

export default function App() {
  const changeCallback = (evt) => {
    console.log(evt.target.dataset.key);
  };

  return (
    <div>
      <ChildComponent changeCallback={changeCallback} dataKey="abc" />
    </div>
  );
}

We create the ChildComponent component that renders an input element with the data-key attribute set to the dataKey prop’s value.

Also, set set the onChange prop of the input to changeCallback.

Next, we define changeCallback in App that gets the data-key attribute value with evt.target.dataset.key.

We render ChildComponent with changeCallback and dataKey set so that when we type in the input, we see the data-key attribute value logged.

Cobnclusion

To retrieve dynamic child key upon emission of an event with React, we can store the key as a data- attribute.

Then we can get the data- attribute value from the dataset property.

Sometimes, we want to handle visibility=hidden with React.

In this article, we’ll look at how to handle visibility=hidden with React.

How to handle visibility=hidden with React?

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow((s) => !s)}>toggle</button>
      <div style={{ visibility: show ? "visible" : "hidden" }}>hello world</div>
    </div>
  );
}

to add a div that can be toggled by the button.

We define the show state with the useState hook.

Then we add a button that has the onClick prop set to a function that calls setShow to toggle the value of show.

Next, we add a div that has the style prop with the visibility property set to 'visible' if show is true and 'hidden' otherwise.

As a result, when we click on toggle, we’ll see the div being toggled on and off.

Conclusion

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.