LineBreak in Array which is in Object Reactjs

Question

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

Mahmoud-Abdelslam · Accepted Answer · 2019-04-10 12:58:30Z

1

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

edited Apr 10, 2019 at 12:58

answered Apr 10, 2019 at 12:46

Mahmoud-Abdelslam

6436 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stefan · Accepted Answer · 2019-04-10 12:47:16Z

0

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

answered Apr 10, 2019 at 12:47

stefan

353 bronze badges

Comments

Dustin Gogoll · Accepted Answer · 2019-04-10 12:48:09Z

0

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.

answered Apr 10, 2019 at 12:48

Dustin Gogoll

2312 silver badges9 bronze badges

Collectives™ on Stack Overflow

LineBreak in Array which is in Object Reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related