Only display item hovered on react after map - javascript

I am really surprised this isn't working as I anticipated.
I want to show a username when the the person visiting the site hovers over the users's message. Below is the code I have so far. The problem is that when I hover over the message every username in the array that I have mapped over appears. How can I change this so that it is only one username?
I guess I need to change the state to each user's message in a separate component, however, I wouldn't have thought this should be neccessary.
class App extends Component {
state = {
showUsername: false
};
showUsername = () => {
this.setState({
showUsername: true
});
}
hideUsername = () => {
this.setState({
showUsername: false
});
}
render() {
let messageArr = this.props.messages.map(msg => {
let name = `${msg.firstName} ${msg.lastName}`;
return(
<div key={msg.id}>
{this.state.showUsername && (
<span>{name}</span>
)}
<li><span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span></li>
</div>
);
});
return (
<ul>
{messageArr}
</ul>
);
}
}

I guess I need to change the state to each user's message in a separate component, however, I wouldn't have thought this should be necessary.
yes.Its necessary.
As of now,there is one common state showUsername is used to show user's name which is why you getting this effect.
showUsername = (oneUserMessage) => {
oneUserMessage.showUsername = true; // updating via reference
}
hideUsername = (oneUserMessage) => {
oneUserMessage.showUsername = false;// updating via reference
}
//return in render
return (
<div key={msg.id}>
{msg.showUsername && (
<span>{name}</span>
)}
<li><span
onMouseEnter={()=>{this.showUsername(msg)}}
onMouseLeave={()=>{this.hideUsername(msg)}}>
{msg.message}</span></li>
</div>
);

Your components are behaving like this, because this.state.showUsername is a state inside your component.
So, whichever div is hovered, it will set the state to true, and all of your others will receive this.state.showUsername as true either.
This makes all of them visible.
What you should do is, write a new component having the div and the logic inside of it. So when you map it down, you each of these divs will have its own states.
Another thing, you can do the map like this:
const messageArr = this.props.messages.map((msg) => <div key={msg.id}>
<li>
<span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span>
</li>
</div>);
So no need for the return statement :)

Related

Add onclick or eventListener in insertAdjacentHTML in react-js

I am building a simple react app for learning purpose, I just started learning react-js, I was trying to add paragraph dynamically on user action and it worked perfectly But I want to add an onClick event in insertAdjacentHTML (basically innerHTML).
But onclick event is not working in innerHTML
app.js
const addParagraph = () => {
var paragraphSpace = document.getElementById('container')
paragraphSpace.insertAdjacentHTML('beforeend', `<p>I am dynamically created paragraph for showing purpose<p> <span id="delete-para" onClick={deleteParagraph(this)}>Delete</span>`
}
const deleteParagraph = (e) => {
document.querySelector(e).parent('div').remove();
}
class App extends React.Component {
render() {
return (
<div>
<div onClick={addParagraph}>
Click here to Add Paragraph
</div>
<div id="container"></div>
</div>
)
}
}
What I am trying to do ?
User will be able to add multiple paragraphs and I am trying to add a delete button on every paragraph so user can delete particular paragraph
I have also tried with eventListener like :-
const deleteParagraph = () => {
document.querySelector('#delete').addEventListener("click", "#delete",
function(e) {
e.preventDefault();
document.querySelector(this).parent('div').remove();
})
}
But It said
deleteParagraph is not defined
I also tried to wrap deleteParagraph in componentDidMount() But it removes everything from the window.
Any help would be much Appreciated. Thank You.
Do not manipulate the DOM directly, let React handle DOM changes instead. Here's one way to implement it properly.
class App extends React.Component {
state = { paragraphs: [] };
addParagraph = () => {
// do not mutate the state directly, make a clone
const newParagraphs = this.state.paragraphs.slice(0);
// and mutate the clone, add a new paragraph
newParagraphs.push('I am dynamically created paragraph for showing purpose');
// then update the paragraphs in the state
this.setState({ paragraphs: newParagraphs });
};
deleteParagraph = (index) => () => {
// do not mutate the state directly, make a clone
const newParagraphs = this.state.paragraphs.slice(0);
// and mutate the clone, delete the current paragraph
newParagraphs.splice(index, 1);
// then update the paragraphs in the state
this.setState({ paragraphs: newParagraphs });
};
render() {
return (
<div>
<div onClick={this.addParagraph}>Click here to Add Paragraph</div>
<div id="container">
{this.state.paragraphs.map((paragraph, index) => (
<>
<p>{paragraph}</p>
<span onClick={this.deleteParagraph(index)}>Delete</span>
</>
))}
</div>
</div>
);
}
}
insertAdjecentHTML should not be used in javascripts frameworks because they work on entirely different paradigm. React components are rerendered every time you change a component state.
So you want to manipulate look of your component by changing its state
Solution:
In constructor initialize your component's state which you will change later on button click. Initial state is array of empty paragraphs.
constructor() {
super()
this.state = {
paragraphs:[]
}
}
And alter that state on button click - like this:
<div onClick={addParagraph}>
Add Paragraph function
const addParagraph = () =>{
this.state = this.state.push('New paragraph')
}
Rendering paragraphs
<div id="container">
this.state.paragraphs.map(paragraph =>{
<p>{paragraph}</p>
})
</div>
Additional tip for ReactJS in 2022 - use Functional components instead of Class components

How to add a class of "active" to individual elements in a functional navigation component in react?

This is something quite simple but somehow resulted in a crazy rabbit hole.
This link shows what I want:
https://www.w3schools.com/howto/howto_js_active_element.asp
Nothing special, now the thing becomes hairy for me when the elements in the navbar are rendered from an array of objects (from the specs). The approach I am following is basically rendering a list of buttons, this list of buttons is the state, since supposedly when you update a state it triggers a re-render, then when a button is clicked it "sets" the active class to false on the entire array-state then activates it only for the clicked one. So far it works.
The problem is that the active class is rendered two steps behind. One for the moment when the class in the array-state's elements are set to false, the other when the clicked element gets updated.
As far as I understand useState and setState are queues, hence those are applied asynchronously on each render, in order to avoid that and get the renders to show the current state, useEffect is utilized.
Now the thing is that I am not sure how to apply useEffect in order to achieve the immediate render of the "active" class.
This is the code I have:
import { options } from 'somewhere...'
export default function SideMenu(props){
let auxArr = []
let targetName
const [stateOptions, setStateOptions] = useState([...options])
const [currentOption, SetCurrentOption] = useState({})
function activeOption(e){
// this helps with event bubbling
if (e.target.tagName == "P" || e.target.tagName == "SPAN"){
targetName = e.target.parentElement.id
} else if (e.target.tagName == "IMG"){
targetName = e.target.parentElement.parentElement.id
} else {
targetName = e.target.id
}
// since the main state is an array of objects I am updating it
// in three steps, first the current object is "activated"
// then the main array-state gets "inactivated" to erase all
// the previous "active" classes, finally the activated object
// replaces the corresponding inactive object in the main state.
let targetElement = stateOptions.filter(e => e.id==targetName)[0]
SetCurrentOption({
id: targetElement.id,
activity:true,
img: targetElement.img,
name: targetElement.name
})
// first the "classes" are set to false, then the
// "activated" object replaces the corresponding one
// in the main object, from here comes the two
// steps delay.
auxArr = [...stateOptions]
auxArr.forEach(e => e.activity=false)
setStateOptions(auxArr)
const newOptions = stateOptions.map(e =>
e.id==currentOption.id ? currentOption : e
)
setStateOptions(newOptions)
}
return(
<aside className={styles.sideDiv}>
<nav>
{stateOptions.map(({id, img, name, activity, link}) => {
return(
<button key={id} id={id} onClick={activeOption} className={activity?styles.active:""}>
<Image src={img}/>
<p className={timeColor.theme}> {name} </p>
</button>
)
})}
</nav>
</aside>
)
}
Thanks in advance for any help you can provide.

REACT connect 4 game - attempt to reset grid over setState but results in "undefined"

I am trying to create a Connect of 4 game in React as an exercise.
If i want to reset the grid or for displaying player points, a reset of my grid is required rather than simply reloading the entire page.
In this case, dealing with my grid via state is a logical step, but after several attempts and variations, I'm unfortunately lost at the moment
In this variation below, this.state.grid always returns undefined on reset (console.log right after render method begins).
I see that the problem is most likely because in the gridHtml function I am already passing the grid to the state via setState.
If I call this.gridHTML() directly on the reset button, my grid completely disappears.
I am very grateful for any help at this point
import React from 'react';
class Grid extends React.Component {
constructor(props) {
super(props);
this.state = {
player: "red",
isGameOver: false,
gamestarts: false
};
this.findLastEmptyColl = this.findLastEmptyColl.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onClick = this.onClick.bind(this);
this.checkForWinner = this.checkForWinner.bind(this);
this.gridHtml = this.gridHtml.bind(this);
this.reset = this.reset.bind(this);
};
/*left out MouseEnter, leave, click and win logic , those work fine and to keep it short */
gridHtml() {
let rows = Array(6).fill(0), cols = Array(7).fill(0);
let grid = rows.map((el, i) => {
return (
<div key={i} className="row">
{cols.map((value, index) => {
return (
<div key={index}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onClick={this.onClick}
className="col empty"
data-col={index}
data-row={i}>
</div>
);
})}
</div>
);
});
this.setState({
grid: grid
});
}
componentDidMount() {
this.gridHtml();
}
componentWillMount() {
this.gridHtml();
}
reset() {
this.setState({
grid: this.gridHtml(),
isGameOver: false,
gamestarts: false
})
}
render() {
console.log(this.state.grid);
return (
<>
{!this.state.gamestarts && <h4>Connect 4 - Player {this.state.player} begins!</h4>}
{this.state.gamestarts && <h4>Player {this.state.player} </h4>}
{(this.state.isGameOver && !this.state.gamestarts) && <h4>Player {this.state.player} has won</h4>}
<div id="board">
{this.state.grid}
</div>
<div>
<button style={{margin: "30px"}} onClick={() => {this.reset()}}>Reset</button>
</div>
</>
)
}
}
export default Grid;
Update:
I see that my understanding of React doesn't seem to be properly adjusted yet; in my reset() function, due to the asynchronicity of react, I assume that the dynamic assignment via setState of my grid should actually render automatically?
Again, the problem: when I currently press my reset button, the grid is re-created but the moves, red and yellow, are still on the grid as they were; last I thought of writing a function that instead of creating a new grid removes all CSS classes and data properties related to it - but that would make the whole point of doing something like this with React absurd.
To make it even clearer:
if I extend my reset() function with a setTimeout around setState, right after overwriting my grid, it works?! I can understand why but this right now feels like a hack and I don't want to leave it like this, because this is supposed to be the core competence of React? Hope it helps to understand better
reset () {
this.setState({grid: 'some text ... loading '});
setTimeout(() =>{
this.setState({
grid: this.gridHtml(),
isGameOver: false,
gamestarts: true,
player: "red"
});
}, 1000);
}
Hope somebody can explain?
Many thanks
Your gridHtml() function doesn't return anything so grid is being set to undefined. Try adding a return grid; statement to the end.

React Hooks: useState with onClick only updating the SECOND time button is clicked?

Edit: forgot an important part - this is noticeable if you click the button next to Jeff A. Menges and check the console log.
The important part of the code is the "setFullResults(cardResults.data.concat(cardResultsPageTwo.data))" line in the onClick of the button code. I think it SHOULD set fullResults to whatever I tell it to... except it doesn't work the first time you click it. Every time after, it works, but not the first time. That's going to be trouble for the next set, because I can't map over an undefined array, and I don't want to tell users to just click on the button twice for the actual search results to come up.
I'm guessing useEffect would work, but I don't know how to write it or where to put it. It's clearly not working at the top of the App functional component, but anywhere else I try to put it gives me an error.
I've tried "this.forceUpdate()" which a lot of places recommend as a quick fix (but recommend against using - but I've been trying to figure this out for hours), but "this.forceUpdate()" isn't a function no matter where I put it.
Please help me get this button working the first time it's clicked on.
import React, { useState, useEffect } from "react";
const App = () => {
let artistData = require("./mass-artists.json");
const [showTheCards, setShowTheCards] = useState();
const [fullResults, setFullResults] = useState([]);
useEffect(() => {
setFullResults();
}, []);
let artistDataMap = artistData.map(artistName => {
//console.log(artistName);
return (
<aside className="artist-section">
<span>{artistName}</span>
<button
className="astbutton"
onClick={ function GetCardList() {
fetch(
`https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"`
)
.then(response => {
return response.json();
})
.then((cardResults) => {
console.log(cardResults.has_more)
if (cardResults.has_more === true) {
fetch (`https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"&page=2`)
.then((responsepagetwo) => {
return responsepagetwo.json();
})
.then(cardResultsPageTwo => {
console.log(`First Results Page: ${cardResults}`)
console.log(`Second Results Page: ${cardResultsPageTwo}`)
setFullResults(cardResults.data.concat(cardResultsPageTwo.data))
console.log(`Full Results: ${fullResults}`)
})
}
setShowTheCards(
cardResults.data
.filter(({ digital }) => digital === false)
.map(cardData => {
if (cardData.layout === "transform") {
return (
//TODO : Transform card code
<span>Transform Card (Needs special return)</span>
)
}
else if (cardData.layout === "double_faced_token") {
return (
//TODO: Double Faced Token card code
<span>Double Faced Token (Needs special return)</span>
)
}
else {
return (
<div className="card-object">
<span className="card-object-name">
{cardData.name}
</span>
<span className="card-object-set">
{cardData.set_name}
</span>
<img
className="card-object-img-sm"
alt={cardData.name}
src={cardData.image_uris.small}
/>
</div>
)
}
})
)
});
}}
>
Show Cards
</button>
</aside>
);
});
return (
<aside>
<aside className="artist-group">
{artistDataMap}
</aside>
<aside className="card-wrapper">
{showTheCards}
</aside>
</aside>
);
};
export default App;
CodesAndBox: https://codesandbox.io/embed/compassionate-satoshi-iq3nc?fontsize=14
You can try refactoring the code like for onClick handler have a synthetic event. Add this event Listener as part of a class. Use arrow function so that you need not bind this function handler inside the constructor. After fetching the data try to set the state to the result and use the state to render the HTML mark up inside render method. And when I run this code, I have also seen one error in console that child elements require key attribute. I have seen you are using Array.prototype.map inside render method, but when you return the span element inside that try to add a key attribute so that when React diffing algorithm encounters a new element it reduces the time complexity to check certain nodes with this key attribute.
useEffect(() => {
// call the functions which depend on fullResults here
setFullResults();
}, [fullResults])
// now it will check whether fullResults changed, if changed than call functions inside useEffect which are depending on fullResults

how to add css classes to a component in react?

So basically what I am doing is iterating through an array of data and making some kind of list. What I want to achieve here is on clicking on a particular list item a css class should get attached.
Iteration to make a list
var sports = allSports.sportList.map((sport) => {
return (
<SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/>
)
})
A single list item
<div className="display-type icon-pad ">
<div className="icons link">
<img className="sport-icon" src={icon}/>
</div>
<p className="text-center">{text}</p>
</div>
I am not able to figure out what to do with handleClick so that If I click on a particular list it gets highlighted.
If you want to highlight the particular list item it's way better to call the handleClick function on the list item itself, and you can add CSS classes more accurately with this approach,
here is my sample code to implement the single list component
var SingleListItem = React.createClass({
getInitialState: function() {
return {
isClicked: false
};
},
handleClick: function() {
this.setState({
isClicked: true
})
},
render: function() {
var isClicked = this.state.isClicked;
var style = {
'background-color': ''
};
if (isClicked) {
style = {
'background-color': '#D3D3D3'
};
}
return (
<li onClick={this.handleClick} style={style}>{this.props.text}</li>
);
}
});
Keep a separate state variable for every item that can be selected and use classnames library to conditionally manipulate classes as facebook recommends.
Edit: ok, you've mentioned that only 1 element can be selected at a time,it means that we only need to store which one of them was selected (I'm going to use the selected item's id). And also I've noticed a typo in your code, you need to link the function when you declare a component, not call it
<SportItem onClick={this.handleClick} ...
(notice how handleClick no longer contains ()).
And now we're going to pass the element's id along with the event to the handleClick handler using partial application - bind method:
<SportItem onClick={this.handleClick.bind(this,sport.id} ...
And as I said we want to store the selected item's id in the state, so the handleClick could look like:
handleClick(id,event){
this.setState({selectedItemId: id})
...
}
Now we need to pass the selectedItemId to SportItem instances so they're aware of the current selection: <SportItem selectedItemId={selectedItemId} ....Also, don't forget to attach the onClick={this.handleClick} callback to where it needs to be, invoking which is going to trigger the change of the state in the parent:
<div onClick={this.props.onClick} className={classNames('foo', { myClass: this.props.selectedItemId == this.props.key}); // => the div will always have 'foo' class but 'myClass' will be added only if this is the element that's currently selected}>
</div>

Categories

Resources