如何从反应 state 向文本添加换行符

Question

So here's a perfectly working react code

const about={
  text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?',
  text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?'
}

function App() {

  const [text, setText] = useState(about)
  const [switchh, setSwitch] = useState(false)

  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
     <h1>{switchh ? text.text1 : text.text2}</h1>
    </div>
  );
}

export default App;

this code is working as it should however I can't seem to find a way to add line break to it. I want it to look like this

<h1>Lorem, ipsum dolor sit amet<br/> consectetur adipisicing elit. Facere, qui?</h1>

how do i achieve that while using state cause I need the switch also

Answer 1

Try this approach,

Use html as value to the text1 itself like below,

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

Complete Code:-

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [text, setText] = useState(about);
  const [switchh, setSwitch] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
      <h1>{switchh ? text.text1 : text.text2}</h1>
    </div>
  );
}

Working code - https://codesandbox.io/s/determined-feather-qd7me?file=/src/App.js

Answer 2

If you can change the content of about object, and if you don't mind to add some css for the element, you can try this:

const about={
  text1: 'Lorem, ipsum dolor sit amet \n consectetur adipisicing elit. Facere, qui?',
  text2: 'eligendi voluptates nesciunt \n quam dolor reiciendis dolorum voluptas? Labore, a pariatur?'
}

... 

<h1 className='my-text'>{switchh ? text.text1 : text.text2}</h1>

and the css:

.my-text {
  white-space: pre-wrap;
}

Answer 3

Storing a react element in state is not a good practice and try not to use reserved words like switch . If a state holds a boolean value, a good practice is to name the variable starting with 'is' or 'has'.

My solution:

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [isSwitchedOn, setIsSwitchedOn] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setIsSwitchedOn(!isSwitchedOn)}>switch</button>
      <h1>{isSwitchedOn ? about.text1 : about.text2}</h1>
    </div>
  );
}

Answer 4

you could use an array and map it to {text}

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: [
    'Lorem, ipsum dolor sit amet',
     'consectetur adipisicing elit. Facere, qui?'
  ],
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [text, setText] = useState(about);
  const [switchh, setSwitch] = useState(false);
console.log(text.text1)
  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
      <h1>{switchh ? text.text1.map(line=>(<React.Fragment key={line}>{line}<br/></React.Fragment>)) : text.text2}</h1>
    </div>
  );
}