CODEWITHSUNDEEP
reactjs
ITselect
ITselect

Reputation: 153

How do you do an inline styling in React to display an unordered list as a result of using the map() method?

In my React component, I have defined a numbers array and I'm using the map() method to display the double of each element of the array in a list format. My goal is to do an inline styling to set the list item marker to a square bullets. The rule state: "To style an element with the inline style attribute, the value must be a JavaScript object and properties with two names, like background-color, must be written with camel case syntax as in backgroundColor."

My code below is not giving me any error, nor is it applying the style I've defined. What am I doing wrong.

NB: I know how to do it with CSS and would like to do it inline here.

  class ListResult extends React.Component{
    constructor(props){
    super(props);
  }
  
  render(){
    const numbers = this.props.numbers;
    const result = numbers.map(e=><li  >{e*2}</li>)
    return(
        <div>
          <p>The result is:</p>
        <ul style={{listStyleType: 'square'}} >{result}</ul>
        </div>
    )
  }
}
const numbers = [1,2,3,4,5];
ReactDOM.render(<ListResult numbers={numbers} />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Upvotes: 1

Views: 2079

Answers (1)

sonkatamas
sonkatamas

Reputation: 621

Your code is wrong.

You are trying to render out:

<li><ul></li>

Change it:

<ul>
<li></li>
</ul>

return from the map with <li>

this is how it should look:

class ListResult extends React.Component{
    constructor(props){
    super(props);
  }
  
  render(){
    const numbers = this.props.numbers;
    const result = numbers.map(e=><li>{e*2}</li>)
    return(
        <div>
          <p>The result is:</p>
        <ul style={{listStyleType: 'disc'}} >{result}</ul>
        </div>
    )
  }
}
const numbers = [1,2,3,4,5];
ReactDOM.render(<ListResult numbers={numbers} />, document.getElementById('root'));

Upvotes: 1

Related Questions