Reactjs, Styling each element of array with different styles

Question

I want to create an array with some elements and then iterate (with .forEach or .map) it. but each of array elements must have different style. for example I have an array like that:

["johnny red", "Stephanie blue", "Hans green", "Fifty Shades Of grey :d"]

also, I want reuse some of array's individual elements in another component. how can i do that?

(imagine that last word in each element is a individual style e.g. background-color or color,)

Can you help me? please give me an advice, what would I do?

Please, could you be more specific? What's the purpose of the array? — Michele
– Michele, Commented Jul 2, 2019 at 20:53

Dennis Vash · Accepted Answer · 2019-07-02 21:07:44Z

1

There are many ways to achieve this, the key difference is how you are representing your value-style pairs.

Eventually, you need to map the values to their styles.

For example:

const myStyles = {
  'johnny red': { color: 'red' },
  'Stephanie blue': { color: 'blue' },
  'Hans green': { color: 'green' },
  'Fifty Shades Of grey :d': { color: 'pink' }
};

export default function App() {
  return (
    <FlexBox>
      <FlexItem>
        {Object.entries(myStyles).map(([key, style]) => (
          <div key={key} style={style}>
            {key}
          </div>
        ))}
      </FlexItem>
    </FlexBox>
  );
}

edited Jul 2, 2019 at 21:07

answered Jul 2, 2019 at 20:58

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinicius · Accepted Answer · 2019-07-04 16:09:41Z

0

It's not very clear what you want, but you can attach styles to components like this:

const values = [
  {
    text: "one",
    css: { color: 'blue' }
  },
  {
    text: "two",
    css: { color: 'red' }
  },
];

const Test = props => {
  const { values } = props;
  
  return (
    <div>{values.map(
      (value, i) => <div key={i} style={value.css}>{value.text}</div>
    )}</div>
  );
}

ReactDOM.render(
  <Test values={values} />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Jul 4, 2019 at 16:09

answered Jul 2, 2019 at 21:10

Vinicius

1,1631 gold badge12 silver badges22 bronze badges

3 Comments

Casterly Over a year ago

'values' is declared but its value is never read. editor can't read 'values' array :(

Dennis Vash Over a year ago

Missing key props in your answer

Vinicius Over a year ago

@Casterly values array is used as a prop in the Test component

Michael · Accepted Answer · 2019-07-02 20:54:58Z

You mean something like this? The snippet is below and here is the codepen texample: https://codepen.io/tormod17/pen/apvXoW?editors=0010

Also, have you considered incorporating styled components with react? It could help with this project. https://www.styled-components.com/docs/basics

   {children.map(element => {
   return (
      <element.type
       {...element.props}
       style={{
         height: '33%',
       }}
      />
   )
 })}

This is from another project:

          import * as React from "react";
          import { IAddressListProps } from '../../detailPage/components/interfaces/IAddressListProps';
          import { config } from "../../config";

          export class PrintAddressList extends React.Component<IAddressListProps, {}>{
            constructor(props: IAddressListProps) {
              super(props);
            }
            private createAddressCard = () => {
              let parent = [];
              this.props.items.map((address) => {
                parent.push(<div style={{ padding: '10px', border: '1px solid #ccc', margin: '5px' }}>
                  <label>{config.colNames.addressList.clmnAddressType}: </label>
                  <label>{address.Adressart}</label><br />
                  <label>{config.colNames.addressList.clmnCompanyName}: </label>
                  <label>{address.Firma}</label><br />
                  <label>{config.colNames.addressList.clmnPlaceName}: </label>
                  <label>{address.Ort}</label><br />
                  <label>{config.colNames.addressList.clmnZipCode}: </label>
                  <label>{address.PLZ}</label><br />
                  <label>{config.colNames.addressList.clmnTelephone}: </label>
                  <label>{address.Telefon}</label><br />
                </div>);
              });
              return parent;
            }

            public render(): React.ReactElement<IAddressListProps> {
              return (
                <div>
                  {this.createAddressCard()}
                </div>
              );
            }
          }

Collectives™ on Stack Overflow

Reactjs, Styling each element of array with different styles

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related