I am making a website, and i need to display the description of each project
. So i ve started with a simple TEXT() on DB field but the output is a full block text... Then, I ve replace the TEXT() by a BLOB() on my DB with a description.txt, but as unexpected the text is not formatted too, it still as text block. After this change the description.txt by a description.html (with correct ) and the output is read as.text:/ ( i mean this is not read as html file). There is my NodeJS code:
router.get("/:idProject/description", (req, res) => {
const { idProject } = req.params;
const sql = "SELECT p.description FROM project AS p WHERE id = ? ";
connection.query(sql, [idProject], (err, result) => {
if (err) {
res.status(500).send("Impossible de trouver le projet");
} else {
const convertBufferToString = Buffer.from(result[0].description);
res.status(200).send(convertBufferToString);
}
});
});
And my ReactJS code:
function Description({ projectName, url }) {
const { id } = useParams();
const [description, SetDescription] = useState(null);
const getDescription = (idProject) => {
const projectURL = `${process.env.REACT_APP_HOST}/projects/${idProject}/description`;
Axios.get(projectURL)
.then((response) => response.data)
.then((data) => SetDescription(data));
};
useEffect(() => {
getDescription(id);
}, [id]);
return (
<React.Fragment>
<Typography variant="h3">{projectName}</Typography>
<Typography paragraph variant="body1">
</Typography>
<Link href={url}> Lien du site</Link>
{description ? description : "Description du projet"}
</React.Fragment>
);
}
export default Description
I ve trying many things like, new BLob, new File, new FileReader etc but i dont know how to resolve this problem. So my question is: if its possible, how I can read the res.send(BLOB or Buffer) as HTML in ReactJS pls? Instead any suggestion to get a formated description by project.id?
By advance, thanks a lot!
Thanks to my schoolmate Bastiste, who find the solution:
in React:
return (
<React.Fragment>
<Typography variant="h3">{projectName}</Typography>
<Typography paragraph variant="body1" dangerouslySetInnerHTML={{ __html: description }}/>
<Link href={url}> Lien du site</Link>
</React.Fragment>
);
complete guide react dangerouslysetinnerhtml
And now the outpout is as expected! Thanks to him
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.