Formik component=“textarea” multiline in placeholder

user_11707123 0
Viewed 6724

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

formik reactjs
3 Answers
<Field component="textarea" rows="4" value={""}></Field>
user_54010410

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

user_86908570

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}
/>
user_77081720
Related