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

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

react using conditions in map()

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

using map()the conditional in react:

  1. calls the method on the array map().
  2. use the condition that explicitly returns if it is met if.
  3. 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:

  1. call the map() method on the array.
  2. use the ternary operator to check if a condition is true.
  3. 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.

previous:

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:

related articles

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 属性获取元素的高度。

scroll to an element on click in react

publish date:2025/03/11 views:162 category:react

在 react 中点击滚动到一个元素: 在要滚动到的元素上设置 ref 属性。 在另一个元素上设置 onclick 属性。 每次点击元素时,调用 ref 对象的 scrollintoview() 方法。

get data on button click in react

publish date:2025/03/11 views:67 category:react

要在 react 中单击按钮获取数据: 在按钮元素上设置 onclick 属性。 每次单击该按钮时,都会发出一个 http 请求。 更新状态变量并渲染数据。

styling the border css property in react

publish date:2025/03/11 views:168 category:react

使用 border css 属性来设置react中元素的边框样式,例如 div style={{border: '1px solid rgba(0,255,0,0.3)'}}。 如果我们只需要设置特定边框的样式,请使用相应的属性,例如 borderbottom。

make an http request on click in react

publish date:2025/03/11 views:64 category:react

要在 react 中单击时发出 http 请求: 在元素上设置 onclick 属性。 每次单击该元素时,都会发出一个 http 请求。 更新状态变量并渲染数据。

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

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

scan to read all tech tutorials

social media
  • https://www.github.com/onmpw
  • qq:1244347461

recommended

tags

scan the code
easier access tutorial
网站地图