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
<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;
>Solution :
If I understand your querstion correctly you are receiving an html that you want to display using react JSX
take a look at this https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml