CODEWITHSUNDEEP
reactjs
Asad
Asad

Reputation: 59

LineBreak in Array which is in Object Reactjs

I have an Object of node in which there is an array of text i want to print node.text with line break in mapping function

   {this.state.nodes.map((node, index) => {

         return(
          <div
                 key={index}
                 className={'node ' + node.className}
                 id={node.id}
                 ref={nodes => this.refs.nodes[index] = nodes}
                 style={node.style}
                 onClick={this.activeElem}

             >

         {node.text}

        })}

it is printing an entire object i have tried \n and
both are not working how can i show it with LineBreak

This is mine Json object

here is the screenshot of my json object

https://gyazo.com/8da374e8cbdaf85c7516b27c415eab9c

Upvotes: 0

Views: 818

Answers (3)

Mahmoud-Abdelslam
Mahmoud-Abdelslam

Reputation: 643

Could you please try this {node.text}<br/> or insert it inside div element <div>{node.text}</div>

if you need to linebreak the content of the array you can do the following :

 {node.text.map(item => (
              <div >
                 {item}
              </div>
            ))}

Upvotes: 1

Dustin Gogoll
Dustin Gogoll

Reputation: 231

In HTML you can't make Line Breaks via \n. There are serveral ways to do line breaks with HTML and CSS, the easiest one is the <br> tag

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

You could map over the array and add an
tag on every iteration.

Upvotes: 0

stefan
stefan

Reputation: 35

You could wrap your div in a React Fragment and put a <br> after every div.

Upvotes: 0

Related Questions