How to render multiple button with different bg color
Hey guys , hope you doing well. I started to study react and to not only focus on the theory I’m starting to build something. I wanted to render multiple buttons (given an array with names in it) but each with different colors: the colors are 2 and should be seen as 1-2-2-1 . I did the first part, rendering 4 button with each a name contained in the array but I really can’t think of how to set the color… I was thinking to use a useState , but I’m making more confusing and here I’m asking for your help! ( I’m styling with Tailwind) . Thank you
19 Replies
are there only ever four buttons?
If you are defining the button names in an array, couldn't you also add the colors to that array (or object) and use them in the same way as the names?
(Sharing some code might help)
+1 an array of objects with title and color. And since they won't "react" to anything there is no need for useState.
const sounds = ["Suikinkutsu", "Cicadas", "Temple Bells", "Shomyo Falls"];
let colors = ["#daff6f", "#a8aeff"];
function Button({ color }) {
return (
<>
{sounds.map((name, index) => (
<button
style={{ backgroundColor: color }}
className=" p-16 relative bg-slate-600"
key={index}
>
<span className="text-white absolute top-5 left-2">{name}</span>
</button>
))}
</>
);
}
export function SoundScapes() {
return (
<div className="grid grid-cols-2 grid-rows-2 gap-3 p-4 mt-10">
<Button />
</div>
);
}
I was trying to proceed this way but it wont work but it looks like SoundScapes isn't passing a color prop to <Button />, so how does Button function know what "color" to use?
btw, a function that returns a bunch of buttons shouldn't be named Button. Try to be specific or descriptive and it helps everyone understand.
I believe you need to map the colours array and pass it as a props to the Buttons in SoundScapes
const soundsColor = [
{
name: "Suikinkutsu",
color: "#daff6f",
},
{
name: "Cicadas",
color: "#A8AEEF",
},
{
name: "Temple Bells",
color: "#A8AEEF",
},
{
name: "Shomyo Falls",
color: "#daff6f",
},
];
function Buttons() {
return (
<>
{/* Destructuring per rilevare le properties dall'oggetto */}
{soundsColor.map(({ name, color }, index) => (
<button
className="p-20 relative rounded-[10px] "
style={{ backgroundColor: color }}
key={index}
>
<span className="text-[#000] absolute top-5 left-2">{name}</span>
</button>
))}
</>
);
}
export function SoundScapes() {
return (
<div className="grid grid-cols-2 grid-rows-2 gap-3 p-6 mt-44">
<Buttons />
</div>
);
}
I solved following Chris advice, creating an array of objects then mapping thru the array and destructuring so I can access to the properties. Now I "just' have to call an API that will select the sounds once i click the buttons...
thank you all! hopefully i can ask you more about that!!Did that work?
Yes I have now 4 buttons ( because there are only 4 soundscapes) following the pattern color1 color2 color2 color1 , into a 2 columns 2 rows grid ( mobile view)
You could also find an nth-of-type range to work for this pattern too if you wanted to handle it in css instead
Like selecting nth-child pattern of numbers like (2nd,4th and so on)?
Yes
Kevin Powell
YouTube
A simple CSS solution to select ranges of content
Looking to step up your CSS Game? I have free and premium courses 👉https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=selectranges
🔗 Links
✅ Code from this video: https://codepen.io/kevinpowell/pen/jOROmVQ
✅ nth-child type of syntax support: https://caniuse.com/css-nth-child-of
⌚ Timestamps
00:00 - Introduction
0...
Oh yes! that could be a good idea too. In my case im using Tailwind... now i managed to implement the color and the sounds when clicking the button... it's pretty cool . I have to add a timer now
Sounds ? What kind of sounds ?
Every button is associated to a soundscape , I created an array of object containing { name, color, description, sound }
Make sure you give people an option to toggle that off . Using sounds on load is not ideal and there isn’t a query that we can check users preferences so it has to be built in to turn it off. Otherwise people will just leave .
1. Autoplay is an Accessibility Nightmare
https://pressbooks.pub/publishingfortheweb/chapter/autoplay-is-an-accessibility-nightmare/
2. Quiet, Please! (Why We Discourage Autoplay Sounds On Websites)
https://www.therapysites.com/quiet-please-why-we-discourage-autoplay-sounds-on-websites/
3. Video and audio autoplay - evidence that it's bad practice
https://ux.stackexchange.com/questions/5252/video-and-audio-autoplay-evidence-that-its-bad-practice
TherapySites
TherapySites
Quiet, Please! (Why We Discourage Autoplay Sounds On Websites) | Th...
Like photos, contact forms and maps, music and videos on your site can be great "enhancer" features. When placing music on a site, you have the option as to whether to have the website automatically play the music, or play the music only when the user clicks the "play" button. While you should always be
User Experience Stack Exchange
Video and audio autoplay - evidence that it's bad practice
Does anyone have any evidence or could point me in the direction of a web page that explains why video and audio autoplay is bad practice. I know it is but i'm struggling to find anything to back t...
thank you so much for your advice! Actually I would like to remove the <audio> and <source> tag and insert the <New Player> npm package so I think I can have more control over it. right now the sounds dont play automatically but when another button is pressed, the previous keeps playing.
Embedding Videos with React Player NPM
Learn how to embed videos in React with React Player npm.