CODEWITHSUNDEEP
javascriptreactjs
Casterly
Casterly

Reputation: 73

Reactjs, Styling each element of array with different styles

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?

Upvotes: 1

Views: 6319

Answers (3)

Vinicius
Vinicius

Reputation: 1154

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>

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53874

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

Edit Q-56859756

Upvotes: 1

Michael
Michael

Reputation: 167

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

Upvotes: 0

Related Questions