We Keep Coding

How to track changes of a referenced element with React?

I have a problem which requires me to store the texted of a referenced element in an array.
Now, I first want to display the text for each element(paragraph element with "ebookName" class) in the console, before storing it in the array.
But I have been having problems... Whenever I click an element, the console just logs the previous elements text always. I want for each paragraph element to log that specific elements text, not the previous one
Link to JS code:
import React from 'react'
import "./Styles/Ebook.css"
import { useRef } from 'react';
function Ebook() {
const bookName = useRef();
let ebookData = JSON.parse(sessionStorage.getItem("ebook"));
/*function that displays the specific text of a specific element onto the console*/
const elementLogFunction = () =>{
console.log(bookName.current)
}
return (
<section id="musicRender">
{ebookData.results.map((ebook, i)=>{
return (
<div key={i} className='ebookContentContainer'>
<div className="ebookPicture">
<img src={ebook.artworkUrl100} alt={ebook.trackName} />
</div>
<div className="ebook-description">
<p className="ebookAuthor">Author: {ebook.artistName}</p>
<p ref={bookName} className='ebookAName'>Book Name: {ebook.trackName}</p>
<p className="price">Price: R{(ebook.price * 15.36).toFixed(0)}</p>
<button onClick={elementLogFunction} className="favourites-btn">Add To Favourites</button>
</div>
</div>)
})}
</section>
)
}
export default Ebook

According to your code, ref is only referred to the same data, and the new one will override the old one. In your case, the last book data will be kept.
If you want to have individual book data separately, you can pass a param to elementLogFunction.
You also shouldn't read sessionStorage every rendering. This behavior causes a performance issue due to getting data multiple times. You can use useEffect to read data only once after the first rendering.
function Ebook() {
const [ebookData, setEbookData] = React.useState([]);
//only add data for the first rendering
useEffect(() => {
setEbookData(JSON.parse(sessionStorage.getItem("ebook")));
}, []);
/*function that displays the specific text of a specific element onto the console*/
const elementLogFunction = (ebook) =>{
console.log(ebook.trackName)
}
return (
<section id="musicRender">
{ebookData.results.map((ebook, i)=>{
return (
<div key={i} className='ebookContentContainer'>
<div className="ebookPicture">
<img src={ebook.artworkUrl100} alt={ebook.trackName} />
</div>
<div className="ebook-description">
<p className="ebookAuthor">Author: {ebook.artistName}</p>
<p ref={bookName} className='ebookAName'>Book Name: {ebook.trackName}</p>
<p className="price">Price: R{(ebook.price * 15.36).toFixed(0)}</p>
<button onClick={() => elementLogFunction(ebook)} className="favourites-btn">Add To Favourites</button>
</div>
</div>)
})}
</section>
)
}
export default Ebook

How to get this value in a variable and use it in a conditional in React?

I would appreciate any help in getting this sorted out. In the code below I would like to take the values between `` from the span and assign them to a variable in order to have the following logic:
${research.data.codesRelated[1].code} === undefined
? ${research.data.description}
: ${research.data.codesRelated[1].code} ${research.data.description}
How can I do this? It seems so easy but I couldn't sort it out, don't know where to place the const & conditional rendering inside the code and to make it work. Everyone in advance.
The code is below:
const Research: FC<ResearchProps> = memo(
({ research, hideLabel = false, intl }) => (
<div className="section research">
<div className="section__value" id="container-research-value">
<div className="research-info">
<div className="description" id="element-research-description">
<PopoverWrapper
id="element-research-description-tooltip"
trigger="hover"
placement="top"
speaker={<span className="text-tooltip">{research.data.description}</span>}
>
**<span>{`${research.data.codesRelated[1].code} ${research.data.description}`}</span>**
</PopoverWrapper>
</div>

You can try this
const Research: FC<ResearchProps> = memo(
({ research, hideLabel = false, intl }) => (
<div className="section research">
<div className="section__value" id="container-research-value">
<div className="research-info">
<div className="description" id="element-research-description">
<PopoverWrapper
id="element-research-description-tooltip"
trigger="hover"
placement="top"
speaker={<span className="text-tooltip">{research.data.description}</span>}
>
<span>{research.data.codesRelated[1].code === undefined ?
research.data.description
: <>
{research.data.codesRelated[1].code} {research.data.description}
</>}
</span>
</PopoverWrapper>
</div>

As already was mentioned, you can use the ternary operator.
You can use a simple hack: conditional rendering for code with space at the end of the string template.
<span>
{research.data.codesRelated[1].code && `${research.data.codesRelated[1].code} `}
{`${research.data.description}`}
</span>
But the best way to create an external function for build this string. And your render will be like this:
<span>
{buildResearchDescription(research.data)}
</span>

Passing a method down two levels

I'm trying to build a simple little game for fun, but I'm hitting a stump when it comes to passing this method down to its grandchildren. I've found similar topics, but none that answered my question. For this question, I've managed to narrow the code down to what the problem is perceived to be.
The relevant component structure is App.js > Runeboard.js > Rune.js
The Goal: To have Rune.js have an onClick function on each rune that is dynamically produced by whatever is in this.state.usersRunes.
I don't believe there is anything wrong with the function itself, or passing it down as props, because console logging the runes values all succeed when in Runeboard.js, and even in Rune.
This works, but is not dynamic to what is in the this.state.usersRunes array:
return (
<div>
Runeboard
<span onClick={() => this.props.activateRune(this.props.usersRunes[0])}> {this.props.usersRunes[0]} </span>
<span onClick={() => this.props.activateRune(this.props.usersRunes[1])}> {this.props.usersRunes[1]} </span>
<span onClick={() => this.props.activateRune(this.props.usersRunes[2])}> {this.props.usersRunes[2]} </span>
<span onClick={() => this.props.activateRune(this.props.usersRunes[3])}> {this.props.usersRunes[3]} </span>
<br />
<br />
</div>
);
The problem with that, is I'd like for every item in this.state.usersRunes (an array of integers), a Rune component that has its own onClick that successfuly executes activateRune with its parameter of the value of the rune. (The value of the rune being this.state.usersRunes So this.state.usersRunes = [2,3,5,9] the values would be 2, 3, 5, and 9.
So even though the above works, this does not and I do not understand why:
App.js
The activateRune function:
activateRune(rune) {
if (this.state.inBet || this.state.mustBet) {
this.call(rune)
} else if (!this.state.inBet) {
this.setMessage("You cannot place a rune first!")
}
}
App.js render:
<Runeboard
activateRune={this.activateRune}
usersRunes={this.state.usersRunes}
/>
Runeboard.js
render:
let rune = this.props.usersRunes.map((rune, i) => {
console.log(rune) // this works and successfully prints the array's integers
return(
<div>
<Rune activateRune={this.props.activateRune}
runeValue={rune} key={i} />
</div>
)
})
return(
<div>
{rune}
</div>
)
Rune.js
render:
return (
<div onClick={() => this.props.activateRune(this.props.runeValue)}>
{this.props.runeValue} // this works and successfully displays the value
</div>
);
How can I resolve this?

I think it might be an issue with your syntax.
<div onClick={() => {this.props.activateRune(rune)}}>
If you use curly braces, {}, you need a return value:
<div onClick={() => {return this.props.activateRune(rune)}}>
You can also avoid the curly braces and have it be:
<div onClick={() => this.props.activateRune(rune)}>

Shoutout to #xiiishaneiiix and #haopeng for the fast answers! Their comments/answer helped me try out some new things, which made me test some things and narrow what the cause was.
Turns out it was within Runeboard, in a conflict with the parameter and variable name being the same.
let rune = this.props.usersRunes.map((rune, i) => {
return(
<div>
<Rune activateRune={this.props.activateRune} runeValue={rune} key={i} />
</div>
)
})
return(
<div>
{rune}
</div>
)
Having the same name, the property I was trying to pass was actually grabbing the variable with the same name, and not the parameter from map.
The solution was in renaming the variable and parameter, clearing telling the code that we want the parameter from the map and not the variable:
let runes = this.props.usersRunes.map((runeValue, i) => {
return(
<div>
<Rune activateRune={this.props.activateRune} runeValue={runeValue} key={i} />
</div>
)
})
return(
<div>
{runes}
</div>
)

Recursive rendering of components at all levels

I need help in to recursively render the components at all levels.
There are Nodes at top level and then the same structure is followed till the end.
If we get Privilege we render it differently however all Categories need to be displayed above.
Please find a fiddle here:
https://jsfiddle.net/vedvrat13/dq0u2pm7/
Expected Output:
--Category 1
----SubCategory 1
------Privilege 11
--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22
Please help me with the same.
I tried multiple approaches however i am getting stuck as to how to render and call the function too.

This might help you to form the structure what you are expecting. You need to form tree structure to achieve it and find the working module here https://stackblitz.com/edit/react-65krxc?file=TreeComponent.js
renderRecursiveNodes(nodes){
return nodes.map(node => {
return (
<div>
<TreeComponent node={node} />
</div>)
});
};
render() {
return (
<div>
{this.renderRecursiveNodes(this.state.items)}
</div>
)
}
Inside your TreeComponent
render() {
let childNodes;
if (this.props.node.nodes && this.props.node.nodes.length > 0) {
console.log('test');
childNodes = this.props.node.nodes.map(function(node, index) {
return <li key={index}><TreeComponent node={node} /></li>
});
}
return (
<div>
<h5>
{this.props.node.label}
</h5>
<ul >
{childNodes}
</ul>
</div>
)
}
Please let me know if you need more info. Thanks

Fixed:
renderRecursive(level, nodes){
return nodes.map(node => {
return (
<div>
<div>{node.label}</div>
{(node.type === 'CATEGORY' && node.nodes) && this.renderRecursive(level++, node.nodes)}
</div>)
});
};

Okay this is a fun little one, but your issue is that you aren't actually looking at it the right way and as a result aren't building your markup structure correctly :P
By the looks of your Fiddle your end result actually want's to be this:
<div>
<div>
Category 1
<div>
Subcategory 1
<div>
Privilege 11
</div>
</div>
</div>
<div>
Category 2
<div>
Subcategory 2
<div>
Privilege 21
</div>
<div>
Privilege 22
</div>
</div>
</div>
</div>
Boy that was annoying to type... Anyways, so once you look at this you can see:
A parent div
Every child is wrapped in a div, and has the label and (potentially) a child.
So now we build:
... or not because you answered it XD

React conditionally show link if there is content on json file?

Did some searching around, but could not find anything. this is something simple on jQuery and Rails, but not sure if there is a correct way to to this in React. I have this component that is grabbing its data form a JSON file, and I want to only display a certain link if the JSON has content, otherwise I want to hide it. I tried this way so far with no luck:
renderList(projectLinks){
//let self = this;
return projectLinks.map(function(link) {
var showDemo = "";
if(link.urlDemo === ""){
console.log("i'm empty");
showDemo = "displayNone";
}
return <Panel header={link.title} eventKey={link.eventKey} key={link.title}>
<p>{link.description}</p>
<img src={link.image} className="img-thumbnail" alt="project thumbnail"/><br />
<a href={link.urlDemo} className={showDemo}>Demo </a>
<a href={link.urlCode}>Code </a>
</Panel>
});
}
so, if the json link is empty like this: "urlDemo": "", I want the link to be hidden.
Appreciate the help.

Inside render, use conditional operator. Here's an example
render(){
return (
<div>
{this.state.check ? <div>Show this if check is true</div> :
<div>Show this if check is false</div>}
<div>
)
}
Edit: A more specific example
render(){
return(
<div>
{link.urlDemo ? <a href={link.urlDemo}>Demo </a> : null}
</div>
)
}
Another way of doing the same:
render(){
return(
<div>
{link.urlDemo && <a href={link.urlDemo}>Demo </a>}
</div>
)
}