Category: React Answers

Sometimes, we want to add CSS display: none within conditional with React JSX.

In this article, we’ll look at how to add CSS display: none within conditional with React JSX.

How to add CSS display: none within conditional with React JSX?

To add CSS display: none within conditional with React JSX, we set the style prop.

For instance, we write

<div style={{ display: showStore ? "block" : "none" }}>
  <div>a lot more divs</div>
</div>

to set the style prop to an object that has the display property set to 'block' if showStore is true and 'none' otherwise.

Conclusion

To add CSS display: none within conditional with React JSX, we set the style prop.

Sometimes, we want to fix TypeError: Cannot read property ‘props’ of undefined with React.

In this article, we’ll look at how to fix TypeError: Cannot read property ‘props’ of undefined with React.

How to fix TypeError: Cannot read property ‘props’ of undefined with React?

To fix TypeError: Cannot read property ‘props’ of undefined with React, we should make sure the value of this is correct.

For instance, we write

class Parent extends React.Component {
  state = {
    //...
  };

  onDelete = () => {
    //...
  };

  render() {
    return <Child onDelete={this.onDelete} />;
  }
}

to add the onDelete function which has the value of this set to the Parent component instance since it’s an arrow function.

Conclusion

To fix TypeError: Cannot read property ‘props’ of undefined with React, we should make sure the value of this is correct.

Sometimes, we want to fix onClick doesn’t render new React component.

In this article, we’ll look at how to fix onClick doesn’t render new React component.

How to fix onClick doesn’t render new React component?

To fix onClick doesn’t render new React component, we can use React Router.

For instance, we write

import { withRouter } from "react-router-dom";
import Button from "components/button";

const yourComponent = ({ history }) => {
  return (
    <Button onClick={() => history.push("/path")}> New componentPage </Button>
  );
};

export default withRouter(yourComponent);

to create the yourComponent component that calls history.push with the destination path to navigate to it when we click on the button.

The history prop is available since we call withRouter with yourComponent.

Conclusion

To fix onClick doesn’t render new React component, we can use React Router.

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.