Kevin Powell - Community•10mo ago

Format string from an object

I'm attempting to format text from an object in an array. I am mapping the objects to jsx. I am not sure how I would go about formatting a single property from a particular object. I've been googling for a bit, but maybe I'm not asking the right question. Any Ideas?

 {
      id: '0',
      picture: '',
      note: `
      Unknown artist by the name of anonymous 
      Picking up their pen of silk, Creating wonders 
      Each creation being a blessing from heavens 
      Without any mistake, they had made no blunders
      
      In a few strokes, they depicted 
      An image from their conception
      Vague idea of their perception
      That none would have predicted
      
      Genius veiling their face behing a disguise, 
      A pleasant and kind persona that symbolize 
      Not only an idol but also a friend!
      A virtuous and kind soul that bounds knows no end.`,
      username: 'anonymous',
    },...

 {
      id: '0',
      picture: '',
      note: `
      Unknown artist by the name of anonymous 
      Picking up their pen of silk, Creating wonders 
      Each creation being a blessing from heavens 
      Without any mistake, they had made no blunders
      
      In a few strokes, they depicted 
      An image from their conception
      Vague idea of their perception
      That none would have predicted
      
      Genius veiling their face behing a disguise, 
      A pleasant and kind persona that symbolize 
      Not only an idol but also a friend!
      A virtuous and kind soul that bounds knows no end.`,
      username: 'anonymous',
    },...

const allNotes = notes.map((note) => (
    ...<div className="note">
      <img src={note.picture} className="noteImg" />
      <div className="noteSection">
        <p>{note.note}</p>
        <div key="id">
          - <span className="usernameText">{note.username}</span>
        </div>
      </div>
    </div>
))...

const allNotes = notes.map((note) => (
    ...<div className="note">
      <img src={note.picture} className="noteImg" />
      <div className="noteSection">
        <p>{note.note}</p>
        <div key="id">
          - <span className="usernameText">{note.username}</span>
        </div>
      </div>
    </div>
))...

I would like the format to be 3 blocks of 4 lines, like a poem (how it looks in the code above). The issue is that the display does not have any breaks.

2 Replies

missymae•10mo ago

When you style the <p> tag, try adding

white-space: break-spaces;

white-space: break-spaces;

JawsbreakerOP•10mo ago

Thank you! That got me a lot closer!

Gaming

Programming

Format string from an object