score:2

Accepted answer

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

score:0

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

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

score:0

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

Related Query

More Query from same tag