How do I add style inline the color code which I m getting from an array of object-CodePudding

Suppose my array of object is like this ms=[{id : 1 , Name : a , color : #333} {id : 2 , Name : b , color : #666} {id : 3 , Name : c , color : #ddd}]

Now my return in functional component

ms.map((eachname, index)=>
{
 <div classname = mainbloc>
   <div classname = insideblock style=. 
     {{borderRight: 1px solid ###}}>
      {eachname.Name}
   </div>
 </div>
})

I want to add the color of each object in the border right ### place

CodePudding user response：

Use template strings to embed javascript expressions or values between strings. You can do something like this.

  ms.map((eachname, index) => (
    <div classname="mainblock" key={index}>
      <div
        classname="insideblock"
        style={{ borderRight: `1px solid ${eachname.color}` }}
      >
        {eachname.Name}
      </div>
    </div>
  ));

More information on template string: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

CodePudding user response：

In case, for some reason, you don't want to use template strings you can use:

style={{
    borderRightWidth: 1, 
    borderRightWidth: 'solid', 
    borderRightColor: eachname.color, 
}}

CodePudding user response：

You can also use styled components if you don't want to use inline styling and make component more reusable and readable. More information Styled components

import styled from 'styled-components'

const StyledDiv = styled.div`
 borderRight: ${props => props.color}
`

 ms.map((eachname, index) => (
  <div classname="mainblock" key={index}>
   <StyledDiv color={eachname.color}>
    {eachname.Name}
   </StyledDiv>
  </div>
));