why the &#10 and &#32 in the placeholder attribute doesn't work in the browser

Question

A question about how the "&#10" and " " work together in the placeholder attribute. Here is my code:

render() {
 return(
   <div>{
      if this.state.showTextarea?
      <div> 
        <form> 
         <textarea  placeholder='ex:&#10;{"data":{&#10;&#32;"name":"petter"&#10;}&#10;}'> </textarea>
        </form>
      </div>
      : null
   } 
   </div>
);
}

Here is the display:

It works very well if running on the code snippet, but it doesn't work in the browser(chrome and Edge). Any idea?

Answer 1

It's not part of the standard. You can do it with Javascript. https://github.com/bradjasper/jQuery-Placeholder-Newlines