Can I put HTML code in string value which I send Google Firebase Cloud Database in React?

Question

I am using React. I am sending and pulling string data from Google Firebase Cloud Database. I want to put HTML code in my string value and I want the browser to implement it.
For example; I sent a string data like this:
lorem ipsum dolor <br> sit amet <ul><li>item1</li><li><item2></li><ul>
And I pulled like this
<div>{data.description}</div>
The result is a string in p tag:
lorem ipsum dolor <br> sit amet <ul><li>item1</li><item2><ul>
But I want to browser implement html codes in string data. Like this
lorem ipsum dolor
sit amet

• item1
• item2

Can I do that?

If it is neccesary this is my sending code in React

function Lessons({ language }) {
  const [lesson, setLesson] = useState({
    id: "",
    topic: "",
    head: "",
    description: "",
    image: "",
  });
  const [disabled, setDisabled] = useState(true);
  const [progres, setProgres] = useState(0);
  const [imageUrl, setImageUrl] = useState("");

  function handleChange(e) {
    lesson[e.target.id] = e.target.value;
    setLesson({ ...lesson, lesson });

    if (
      lesson.id !== "" &&
      imageUrl !== "" &&
      lesson.description !== "" &&
      lesson.head !== ""
    ) {
      setDisabled(false);
    } else {
      setDisabled(true);
    }
  }

  const imageHandler = (e) => {
    e.preventDefault();
    const image = e.target[0].files[0];
    uploadImages(image);
  };

  const uploadImages = (image) => {
    const storageRefLes = ref(storage, `/lesAndEx/${image.name}`);
    const uploadTask = uploadBytesResumable(storageRefLes, image);
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const prog = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgres(prog);
      },
      (err) => console.log(err),
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((url) =>
          setImageUrl(url, imageUrl)
        );
      }
    );
  };

  const add = async (event) => {
    event.preventDefault();
    const newTopic = lesson.topic;
    switch (language) {
      case "English":
        await setDoc(doc(db, "lessons-data-" + newTopic, lesson.id), {
          head: lesson.head,
          image: imageUrl,
          description: lesson.description,
        });

        break;
      case "Dutch":
        await setDoc(doc(db, "lessons-data-Dutch-" + newTopic, lesson.id), {
          head: lesson.head,
          image: imageUrl,
          description: lesson.description,
        });

        break;
      case "Turkish":
        await setDoc(doc(db, "lessons-data-Turkish-" + newTopic, lesson.id), {
          head: lesson.head,
          image: imageUrl,
          description: lesson.description,
        });

        break;
    }
    setLesson({
      id: "",
      topic: "",
      head: "",
      image: "",
      description: "",
    });
    setImageUrl("");
    setDisabled(true);
    setProgres(0);
  };

  return (
    <div className="bigContainer">
      <h1>Lessons</h1>
      <h2>Language: {language}</h2>

      <div>
        <div className="topicImageLoader">
          <form onSubmit={imageHandler}>
            <input type="file"></input>
            <button type="submit">Upload</button>
          </form>
          <h2>Uploaded {progres} %</h2>
        </div>
        <div className="topAndExLabels">
          <div>
            <label for="id">
              Lesson Id &nbsp;&nbsp;&nbsp;&nbsp;
              <input
                required
                type="text"
                id="id"
                value={lesson.id}
                onChange={handleChange}
                placeholder="Id"
              ></input>
            </label>
          </div>
          <div>
            <label for="topic">
              Lesson Topic
              <input
                required
                type="text"
                id="topic"
                value={lesson.topic}
                onChange={handleChange}
                placeholder="Write exactly"
              ></input>
            </label>
            <label for="image">
              Lesson Image
              <input
                required
                disabled
                type="url"
                id="image"
                value={imageUrl}
                onChange={handleChange}
                placeholder="imageUrl"
              ></input>
            </label>
          </div>
          <div>
            <label for="head">
              Lesson Head
              <input
                required
                type="text"
                id="head"
                value={lesson.head}
                onChange={handleChange}
                placeholder="head"
              ></input>
            </label>

            <div>
              <div className="textAreaArea">Description</div>
              <textarea
                className="textAreaArea"
                required
                rows="8"
                id="description"
                value={lesson.description}
                onChange={handleChange}
                placeholder="lesson"
              ></textarea>
            </div>
          </div>
        </div>

        <div className="topAddButtonCont">
          <button disabled={disabled} onClick={add}>
            ekle
          </button>
        </div>
      </div>
    </div>
  );
}

export default Lessons;

And this is my pulling code

function LessonPage() {
  const [lessons, setLessons] = useState([]);
  const [current, setCurrent] = useState(0);
  const length = lessons.length;
  let topicName = useLocation();

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };
  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  useEffect(() => {
    onSnapshot(
      collection(db, "lessons-data-" + topicName.state.state),
      (snapshot) =>
        setLessons(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
    );
    console.log(topicName.state.state);
  }, []);

  return (
    <div className="slideBody">
      <div className="mainSlide">
        <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
        <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
        {lessons.map(({ id, data }, index) => (
          <div className={index === current ? "data active" : "data"} key={id}>
            {index === current && (
              <div className="slide">
                <div className="dataHeadLesson">{data.head}</div>
                <div className="dataImageLesson">
                  <img src={data.image}></img>
                </div>
                <div className="dataDesc">{data.description}</div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default LessonPage;

Answer 1

Thx to Ilias Aboubeker. I fix the code like this and it works!

<div className="dataDesc" dangerouslySetInnerHTML={{ __html: data.description }}></div>