react using conditions in map()-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript css

react using conditions in map()

author：jiyik last updated：2025/03/11 views：

using map()the conditional in react:

calls the method on the array map().
use the condition that explicitly returns if it is met if.
otherwise return a different value or return nullto render nothing.

export default functionapp() {
  const arr = [1, 2, 3, 4, 5, 6];

  return (
    <div>
      {arr.map((element, index) => {
        if (element % 2 === 0) {
          return <h2key={index}>{element}h2>;
        }
        return <h2key={index}>xh2>;
      })}
    div>
  );
}

we use array.mapthe method to iterate over an array.

the function we pass to is map()called with each element in the array and the index of the current iteration.

in each iteration, we check if the element is divisible by 2 , if yes then we return the element, otherwise we return x.

if you don't want elseto render anything in the clause, you can return null.

export default functionapp() {
  const arr = [1, 2, 3, 4, 5, 6];

  return (
    <div>
      {arr.map((element, index) => {
        if (element % 2 === 0) {
          return <h2key={index}>{element}h2>;
        }
        // 👇️ render nothing
        return null;
      })}
    div>
  );
}

the example renders numbers that are divisible by 2 and renders nothing otherwise.

alternatively, we can use 三元运算符.

using conditions in map() in react:

call the map() method on the array.
use the ternary operator to check if a condition is true.
if the condition is true, then the operator returns the value on the left side of the colon, otherwise it returns the value on the right side of the colon.

export default functionapp() {
  const arr = [1, 2, 3, 4, 5, 6];

  return (
    <div>
      {arr.map((element, index) => {
        return element % 2 === 0 ? (
          <h2key={index}>{element}h2>
        ) : (
          <h2key={index}>xh2>
        );
      })}
    div>
  );
}

we used a conditional ternary operatorif/else very similar to the statement .

if the expression before the question mark evaluates to true, then the value to the left of the colon is returned, otherwise the value to the right of the colon is returned.

in other words, if the element is divisible by 2 , then return the element, otherwise return x.

as in the previous example, elsewe must return if we want to return nothing in the if clause null.

export default functionapp() {
  const arr = [1, 2, 3, 4, 5, 6];

  return (
    <div>
      {arr.map((element, index) => {
        return element % 2 === 0 ? <h2key={index}>{element}h2> : null;
      })}
    div>
  );
}

we used the index of the prop in the example key, but if you have a stable unique identifier, it is better to use that.

react uses this prop internally for performance reasons key. it helps the library ensure that only array elements that have changed are re-rendered.

that being said, unless we are dealing with thousands of array elements we won't see any noticeable difference.

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

publish date：2025/03/11 views：172 category：react

要在 react 中设置全局字体系列，需要在 index.css 文件中的 html 元素上设置 font-family 样式，然后将文件导入 index.js 文件中。应该在 index.js 中导入全局 css，以确保它已加载到您的 react 应

conditionally setting styles in react

publish date：2025/03/11 views：72 category：react

在 react 中有条件地设置样式：在元素上设置 `style` 属性。使用三元运算符有条件地设置 css 属性的值。例如，backgroundcolor: count > 0 ? 'lime' : 'salmon'。

publish date：2025/03/11 views：174 category：react

在 react 中获取元素的高度：在元素上设置 ref 属性。在 uselayouteffect 钩子中，更新高度的状态变量。使用 clientheight 属性获取元素的高度。

publish date：2025/03/11 views：169 category：react

大多数开发人员都非常熟悉 react hooks 的工作方式和常见用例，但是有一个 useeffect 问题很多人可能不太清楚。

react using conditions in map()-ag捕鱼王app官网