react using conditions in map()
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
null
to 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.map
the 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 else
to 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, else
we 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.
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 请求。 更新状态变量并渲染数据。
update arrays and objects using usestate hook in react
publish date:2025/03/11 views:91 category:react
-
这篇实用且直截了当的文章向您展示了如何在 react 中正确更新状态中的对象和数组。我们将使用usestate钩子和功能组件。
publish date:2025/03/11 views:169 category:react
-
大多数开发人员都非常熟悉 react hooks 的工作方式和常见用例,但是有一个 useeffect 问题很多人可能不太清楚。