Category: React

Sometimes, we want to map through an object in React.

In this article, we’ll look at how to map through an object in React.

How to map through an object in React?

To map through an object in React, we use some object methods.

For instance, we write

const Comp = () => {
  //...

  return (
    <>
      {Object.keys(subjects).map((keyName, i) => (
        <li className="travelcompany-input" key={i}>
          <span className="input-label">
            key: {i} Name: {subjects[keyName]}
          </span>
        </li>
      ))}
    </>
  );
};

to call Object.keys with the subjects object to return an array of property keys from subjects.

Then we call map with a function that returns a span for each property keyName.

And we render the property value with subjects[keyName].

Conclusion

To map through an object in React, we use some object methods.

Sometimes, we want to get the key prop from a React element.

In this article, we’ll look at how to get the key prop from a React element.

How to get the key prop from a React element?

To get the key prop from a React element, we can store it in a custom attribute.

For instance, we write

const onClick = (event) => {
  console.log(event.target.getAttribute("data-key"));
};

<button data-key={1} onClick={onClick}>
  Press Me
</button>

to set the data-key attribute to 1.

Then we set the onClick prop to the onClick function.

In it, we get the data-key attribute’s value with event.target.getAttribute("data-key").

event.target is the button we clicked on.

Conclusion

To get the key prop from a React element, we can store it in a custom attribute.

Sometimes, we want to disable options with React Select and JavaScript.

In this article, we’ll look at how to disable options with React Select and JavaScript.

How to disable options with React Select and JavaScript?

To disable options with React Select and JavaScript, we set the isDisabled property to true.

For instance, we write

import Select from "react-select";

const ReactSelect = () => {
  const options = [
    { label: "a", value: "a", isDisabled: true },
    { label: "b", value: "b" },
  ];

  return <Select name="mySelect" options={options} />;
};

to set the options prop to the options array.

In options, we set isDisabled to true to disable the first option.

Conclusion

To disable options with React Select and JavaScript, we set the isDisabled property to true.

Sometimes, we want to use onClick with divs in React.js.

in this article, we’ll look at how to use onClick with divs in React.js.

How to use onClick with divs in React.js?

To use onClick with divs in React.js, we set the onClick prop to a function reference.

For instance, we write

<div onClick={doThis}>...</div>

or

<div onClick={() => doThis()}>...</div>

to set the onClick prop to a function.

We set it to the doThis function directly in the first example.

And we set it to a function that calls doThis in the 2nd example.

Conclusion

To use onClick with divs in React.js, we set the onClick prop to a function reference.