CODEWITHSUNDEEP
reactjs
user11042502
user11042502

Reputation:

how to set placeholder as an object in textarea element?

I'm trying to set placeholder in <textarea/> so to appera like this

{
  "name": "jon",
  "job": "developer"
}

I tried to assign placeholder in variable and then call it in placeholder

const placeholderText = 
`{
   "name": "jon",
   "job": "developer"
}`

But i think there's a better a way of doing this, especially when the values of keys in the object are too long this could break the line.

Upvotes: 5

Views: 866

Answers (1)

Tholle
Tholle

Reputation: 112867

You could keep the placeholder in a regular object and use JSON.stringify with some indentation for the placeholder prop.

Example

function App() {
  const placeholderObj = {
    name: "jon",
    job: "developer"
  };

  return (
    <textarea
      placeholder={JSON.stringify(placeholderObj, null, 2)}
      rows={10}
      cols={30}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 4

Related Questions