Author: John Au-Yeung

Sometimes, we want to use if statements within a map callback in React.

In this article, we’ll look at how to use if statements within a map callback in React.

How to use if statements within a map callback in React?

To use if statements within a map callback in React, we can put the if statements inside the map callback and return the items we want according to the given condition.

For instance, we write:

import React from "react";

const nums = [1, 2, 3, 4, 5, 6];

export default function App() {
  return (
    <>
      {nums.map((n) => {
        if (n % 2 === 0) {
          return (
            <p key={n} style={{ color: "green" }}>
              {n}
            </p>
          );
        } else {
          return (
            <p key={n} style={{ color: "red" }}>
              {n}
            </p>
          );
        }
      })}
    </>
  );
}

We call nums.map with a callback that checks if n is even with n % 2 === 0.

If it is, we return a p element with green text.

Otherwise, we return a p element with red text.

We set the key element of the component we return to a unique value so React can keep track of the items.

Conclusion

To use if statements within a map callback in React, we can put the if statements inside the map callback and return the items we want according to the given condition.

Sometimes, we want to add pseudo selector inline styling to the styles prop with React.

In this article, we’ll look at how to add pseudo selector inline styling to the styles prop with React.

How to add pseudo selector inline styling to the styles prop with React?

To add pseudo selector inline styling to the styles prop with React, we can use the Radium library.

For instance, we write:

import React from "react";
import Radium from "radium";

const style = {
  color: "#000000",
  ":hover": {
    color: "#ffffff"
  }
};

const MyComponent = () => {
  return <section style={style}>hello world</section>;
};

const MyStyledComponent = Radium(MyComponent);

export default function App() {
  return (
    <>
      <MyStyledComponent />
    </>
  );
}

We set the style object we the value of the style prop in MyComponent to add the hover styles to the section element.

Then we call the Radium HOC with MyComponent to create the MyStyledComponent component with the hover styles.

Finally, we use MyStyledComponent in App and we can see that the section element’s content becomes white when we hover over it.

Conclusion

To add pseudo selector inline styling to the styles prop with React, we can use the Radium library.

Sometimes, we want to pass an array to useEffect dependency list in React.

In this article, we’ll look at how to pass an array to useEffect dependency list in React.

How to pass an array to useEffect dependency list in React?

To pass an array to useEffect dependency list in React, we can pass in the array state into the dependencies list.

For instance, we write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [nums, setNums] = useState([]);

  useEffect(() => {
    console.log(nums);
  }, [nums]);

  return (
    <>
      <button onClick={() => setNums((nums) => [...nums, nums.length + 1])}>
        insert number
      </button>
      <p>{JSON.stringify(nums)}</p>
    </>
  );
}

We have the nums array state we created with the useState hook.

Then we call useEffect with a callback that logs the current value of nums.

We watch the value of the nums array by passing it into the dependencies array.

Finally, we have a button that inserts a number into nums when we click it.

Now we should see the nums state logged when we click on the button.

Conclusion

To pass an array to useEffect dependency list in React, we can pass in the array state into the dependencies list.

Sometimes, we want to get a component’s name in React.

In this article, we’ll look at how to get a component’s name in React.

How to get a component’s name in React?

To get a component’s name in React, we can use the displayName property.

For instance, we write:

import React from "react";

const Foo = () => <p>foo</p>;
Foo.displayName = "Foo";

export default function App() {
  return <Foo />;
}

to set the Foo.displayName property to the name we want.

Then we can retrieve it in the code and the React developer tools.

Conclusion

To get a component’s name in React, we can use the displayName property.