Convert Text Strings to Rendered HTML in React, Similar to wordhtml.com

Question

I'm working on a small React project where I have two boxes: one for input and another for output. I want the input text to be displayed as rendered HTML in the output box. Essentially, I'm looking for the reverse of dangerouslySetInnerHTML.

Here's what I've tried so far, but it's not giving me the desired result:

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

const InputOutput = () => {
  const [inputValue, setInputValue] = useState("");
  const [outputValue, setOutputValue] = useState("");

  useEffect(() => {
    const paragraphs = inputValue.split("\n").map((p) => p.trim());
    const htmlParagraphs = paragraphs.map((p) => {
      if (!p) return "<p>&nbsp;</p>";
      return `<p>${p.replace(/ /g, "&nbsp;")}</p>`;
    });
    setOutputValue(htmlParagraphs.join(""));
  }, [inputValue]);

  return (
    <div className="container">
      <div className="input-box">
        <h2>Text</h2>
        <textarea
          placeholder="Type here"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
      <div className="output-box">
        <h2>HTML</h2>
        <div>{outputValue}</div>
      </div>
    </div>
  );
};

export default InputOutput;

Input:

Hello all, my name is Alex

This is one empty lane

These are 2 empty lanes

Expected Output:

<p>Hello all, my name is Alex</p>
<p>&nbsp;</p>
<p>This is one empty lane</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>These are 2 empty lanes</p>

Any suggestions on how to achieve this?

Thanks!

Showed on the question

Should be similar to Convert plain string to html in react

Does this answer your question? Rendering raw html with reactjs — X3R0
– X3R0, Commented Oct 2, 2023 at 12:56
Why is htmlParagraphs an array of strings and not an array of react "p" elements? — James
– James, Commented Oct 2, 2023 at 13:16
Is this so you can see newlines etc, if so you could just set the div to render with a style of white-space: pre.. — Keith
– Keith, Commented Oct 2, 2023 at 13:42

Manuel Njiakim · Accepted Answer · 2023-10-02 13:05:03Z

you can define outputValue as component.

import React, { useState, useEffect } from "react";

const InputOutput = () => {
  const [inputValue, setInputValue] = useState("");
  const [outputValue, setOutputValue] = useState(<></>);

  useEffect(() => {
    const paragraphs = inputValue.split("\n").map((p) => p.trim());
    const htmlParagraphs = <>
    {
       paragraphs.map((p) => {
        if (!p) return <p>&nbsp;</p>;
        return <p>{p}</p>;
      })
    }
    </>
   
    setOutputValue(htmlParagraphs);
  }, [inputValue]);

  return (
    <div className="container">
      <div className="input-box">
        <h2>Text</h2>
        <textarea
          placeholder="Type here"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
      <div className="output-box">
        <h2>HTML</h2>
        <div>{outputValue}</div>
      </div>
    </div>
  );
};

export default InputOutput;

Naren Murali · Accepted Answer · 2023-10-02 12:57:52Z

This is my solution, with map operator.

import React, { useState, useEffect } from 'react';
import './style.css';

const App = () => {
  const [inputValue, setInputValue] = useState('');
  const [outputValue, setOutputValue] = useState('');

  useEffect(() => {
    const paragraphs = inputValue.split('\n').map((p) => p.trim());
    const htmlParagraphs = paragraphs;
    setOutputValue(htmlParagraphs);
  }, [inputValue]);

  return (
    <div className="container">
      <div className="input-box">
        <h2>Text</h2>
        <textarea
          placeholder="Type here"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
      <div className="output-box">
        <h2>HTML</h2>
        {outputValue &&
          outputValue.map((element) => (element ? <p> {element}</p> : <br />))}
      </div>
    </div>
  );
};

export default App;

stackblitz

Collectives™ on Stack Overflow

Convert Text Strings to Rendered HTML in React, Similar to wordhtml.com

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related