I'm encountering an issue with my React code.
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import RecipeService from "./RecipeService";
import RecipeProfileImg from "./RecipeProfileImg";
import "../../Assets/css/recipePage.css";
const RecipeComp = () => {
const {id} = useParams();
const [data, setData] = useState({});
useEffect(() => {
RecipeService.readRecipeById(id).then((res) => {
console.log(res.data.type);
setData(res.data);
});
}, [id]);
function splitIngredients(ingrs){
const pieces = ingrs.split(", ");
const listItems = [];
for(let i = 0; i < pieces.length; i++){
const elem = <li>{pieces[i]}</li>;
listItems.push(elem);
}
return listItems;
}
return(
<div>
<h1>{data.name}</h1>
<RecipeProfileImg imgSrc={require("../../Assets/Images/" + data.type + "/" + data.url)} />
<p id={data.url}>{data.type}</p>
<p id={data.type}>{data.url}</p>
<div className="listsBox">
<label className="listLab">Ingredienti:
<ul className="listx">
{
splitIngredients(data.ingredients)
}
</ul>
</label>
<label className="listLab">Tempi:
<ul className="listx">
<li>Tempo di Preparazione: {data.preparationTime} min</li>
<li>Tempo di Cottura: {data.cookingTime} min</li>
</ul>
</label>
</div>
<h3 className="prepTitle">Preparazione</h3>
<p className="methodPar">{data.method}</p>
<a href={'/recipes/delete/' + id}>delete me</a>
<br />
<a href={'/recipes/update/' + id}>update me</a>
</div>
);
}
export default RecipeComp;
In this specific React Component, I am facing an issue where the data.url and data.type values are correctly read in rows 2) and 3), but not in row 1). What could be causing this discrepancy?
1) <RecipeProfileImg imgSrc={require("../../Assets/Images/" + data.type + "/" + data.url)} />
2) <p id={data.url}>{data.type}</p>
3) <p id={data.type}>{data.url}</p>
Thank you for your assistance!
I have also attempted to pass these values using backtick strings,
../../Assets/Images/${data.type}/${data.url}