CODEWITHSUNDEEP
reactjsformik
Harsha Murupudi
Harsha Murupudi

Reputation: 573

Formik component=“textarea” multiline in placeholder

How print the newline/return in placeholder text in Formik textarea. I've tried \n, nothing seems to be working.

// 
, 
 didn't work
<Field
      className="form-control"
      component="textarea"
      name="dayWiseItinerary"
      rows="6"
      placeholder="
      day 1: Temple visit,&#13;&#10;
      day 2: Jungle barbeque,\n
      day 3: Waterfall visit in the evening,\n
      day 4: Visit UNESCO World Heritage Site,\n
      day 5: Art gallery show,\n
      day 6: Visit grand swimming pool,\n
      day 7: Visit to Blue fort
      "
    />

textarea

Upvotes: 3

Views: 12340

Answers (3)

Ashish Mukarne
Ashish Mukarne

Reputation: 841

<Field component="textarea" rows="4" value={""}></Field>

Upvotes: 6

Dalvtor
Dalvtor

Reputation: 3286

Expanding on @Drew Reese answer, and regarding his note about whitespaces, you can also do this:

<textarea
  cols={40}
  placeholder={'day 1: Temple visit,&#13;&#10;'
    + 'day 2: Jungle barbeque,\n'
    + 'day 3: Waterfall visit in the evening,\n'
    + 'day 4: Visit UNESCO World Heritage Site,\n'
    + 'day 5: Art gallery show,\n'
    + 'day 6: Visit grand swimming pool,\n'
    + 'day 7: Visit to Blue fort'}
  rows={20}
/>

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 203051

Template Literals allow you to specify a multi-line string of text.

<textarea
  cols={40}
  placeholder={`day 1: Temple visit,&#13;&#10;
day 2: Jungle barbeque,\n
day 3: Waterfall visit in the evening,\n
day 4: Visit UNESCO World Heritage Site,\n
day 5: Art gallery show,\n
day 6: Visit grand swimming pool,\n
day 7: Visit to Blue fort`}
  rows={20}
/>

enter image description here

Note: Since this is a string template literal, be mindful of the whitespace within the templating. Notice above that the leading whitespace for each line is absent. Also notice now the newlines \n are rendered.

Edit kind-dan-x9qwf

Upvotes: 1

Related Questions