Warm tip: This article is reproduced from serverfault.com, please click
arrays css reactjs

How to change button color depending on array element in ReactJS

发布于 2020-11-28 03:50:02

Say I have two arrays like this:

state = {
   firstArr: ['one', 'two', 'three', 'four', 'five'],
   secondArr: ['one', 'three', 'four']
}

and I'm having a list of buttons like below:

{firstArray.map((item, index) => (
    <label className="btn btn-secondary" key={index}>
        <input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
    </label>
))}

How do I apply a different background color only to the buttons listed in the second array?

Questioner
Olawale Oladiran
Viewed
0
分享
tanmay 2020-11-28 12:01:52

You need to have a conditional class like this, based on whether the current item is part of secondArr or not.

{firstArray.map((item, index) => (
    <label
        className={`btn btn-secondary ${secondArr.includes(item) ? 'different-bg-class' : ''}`}
        key={index}
    >
        <input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
    </label>
))}

热门帖子

1
家庭 or 个人用的 NAS 有什么可以推荐的吗？
2
远程兼职 Web3 工程师
3
请假理由填写问题
4
[烟台大樱桃] 人生不只有上班一条路，被裁后决定专心转行做水果
5
这大约是独立开发的顶流了吧， v 友们怎么看
6
V 友们 今年刚需 需要买车 预算 20 出头 极氪 007 可以入吗
7
黑群和白群的差异，如何选择？
8
急收点发票（电脑、笔记本、硬盘、nas 、 iPad 、服务器、交通、鼠标、键盘）
9
自研摄影 App 胶片拾光，五一限时促销： 1 元购买终身会员
10
已绝版邮箱的讨论

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation
3
shadcn/ui, but for Svelte. ✨
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
5
Performance-portable, length-agnostic SIMD with runtime dispatch
6
ZK Credo
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
12
🎓 Path to a free self-taught education in Computer Science!
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
14
A collective list of free APIs
15
📚 Freely available programming books