Is there a way to separately style components rendered using the .map() function?

Question

I am rendering one <Tuner /> component for each item in my this.state.notes array using this.state.notes.map(). I would like to know if there is a way to style each of these components separately. I would like to position them individually on the page but they are all being rendered together, so if im not mistaken, neither inline styling or className will work. How can this be done?

 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>
);


}

EDIT: I have tried a couple of the solutions that were suggested, but none of them seems to be working.

for this solution, the styles show up in the rendered component in the React console, but the actual styling is not being applied. I think maybe I'm just missing something small here, since the styles exist on the component but just aren't being applied.

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]}

  />
));

Dennis Vash · Accepted Answer · 2019-11-17T20:01:33.937

0

You can use predefined styles and generate them with className or inline styles but less recommended like so:

import React from 'react';
import ReactDOM from 'react-dom';
import './noteStyles.css';

const notes = [{ note: 'A' }, { note: 'B' }];

const NOTE_STYLE = {
  B: {
    color: 'pink'
  },
  A: {
    color: 'palegreen'
  }
};

const App = () => {
  return (
    <>
      {notes.map(({ note }) => (
        <div className={`noteStyle${note}`} style={NOTE_STYLE[note]}>
          {note}
        </div>
      ))}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

edited Nov 17 '19 at 20:01

answered Nov 17 '19 at 17:33

Dennis Vash

50,196
9
100
118

generating className like this and seems really nice to me but it doesnt seem to be working. the classNames are showing up when I inspect the components in the React Console, but the styles arent being applied. – Dallas Oliver Nov 17 '19 at 18:03
Well I cant guess if some other styling overriding it, or how your code written, but that a fairly common approach which works – Dennis Vash Nov 17 '19 at 18:15

score 0 · Answer 2 · answered Nov 17 '19 at 17:34

This is a really broad question since you haven't really described what styles you want but I'll assume you want to do something simple like change a color of a note. There are a few approaches you could take:

Pass style along with your object:

this.state = {
  notes: [{
    note: "E",
    tone: E,
    color: "#ff0000",
  }, {
    note: "A",
    tone: A,
    color: "#ff00ff",
  }, {
    note: "D",
    tone: D,
    color: "#ff00aa",
  }, {
    note: "G",
    tone: G,
    color: "#112233",
  }, {
    note: "B",
    tone: B,
    color: "#ff0011",
  }, {
    note: "e",
    tone: e,
    color: "#ff1100",
  }]
}

Render in the function itself

render() {
 const notes = this.state.notes.map((note, index) => {
  const colors = [
    "#ff0000",
    "#ff00ff",
    "#ff00aa",
    "#112233",
    "#ff0011",
    "#ff1100",
  ];

  return (
    <Tuner
      key={note.note}
      note={note.note}
      color={colors[index]}
    />
  );
});

Use CSS

.note:nth-child(1) { color: ... }

I did specify that I want to position the components on the page separately, but I was more focused on how to implement the actual styling. thanks for your answer though I really appreciate it! — Dallas Oliver, Nov 17 '19 at 17:49

Is there a way to separately style components rendered using the .map() function?

2 Answers2