My goal is to style each <Tuner /> component separately, which are being rendered for each item in the this.state.notes array using this.state.notes.map(). I want to position them individually on the page, but currently they all appear together. This implies that neither inline styling nor className will work in this scenario. How can I achieve separate styling for each component?
this.state = {
notes: [
{ note: "E", tone: E },
{ note: "A", tone: A },
{ note: "D", tone: D },
{ note: "G", tone: G },
{ note: "B", tone: B },
{ note: "e", tone: e }
]}
render() {
const notes = this.state.notes.map(note => (
<Tuner
key={note.note}
note={note.note}
/>
));
return (
<div className="App">
<h1>Online Guitar Tuner</h1>
{notes}
</div>
);
}
After implementing some suggestions without success, I still struggle with applying styles to individual components.
In one attempt, the styles showed up in the React console for the rendered component, yet the actual styling was not applied. It seems like I might be overlooking something minor here, as the styles are present but not taking effect.
constructor(props){
this.noteStyles = {
E: {
backgroundColor: "#4caf50",
border: "none",
color: "white",
padding: "15px 32px",
textAlign: "center",
textDecoration: "none",
fontSize: "16px"
}
};
this.state = {
notes: [
{ note: "E", tone: E },
{ note: "A", tone: A },
{ note: "D", tone: D },
{ note: "G", tone: G },
{ note: "B", tone: B },
{ note: "e", tone: e }
]}
}
const notes = this.state.notes.map(note => (
<Tuner
key={note.note}
playSound={e => this.playSound(e)}
note={note.note}
styles={this.noteStyles[note.note]}
/>
));