We Keep Coding

How to get custom number buttons to show on correct input field react.js

Having a hard time seeing how I could accomplish this. I created some custom number buttons from 0-9 that users can click on instead of using the keyboard. The problem I'm having is I have multiple dynamically created input fields depending on JSON Data so let's say there are 10 dynamically created input fields and a user starts with question one and the user then uses the custom number buttons I created and clicks numbers "145" to answer question one, but what happens is then all 10 inputs have the same number "145" not the problem the user was trying to solve. I'm using the context API to then save the values typed in on a function called getButtonValue that I then call to the parent component and save the values in a state array, so I know that my problem is that all the inputs share the same state array but how could I make sure the correct input the user clicks on is only receiving those values.
Thanks in advance.
My Custom Number Button Component:
import { FormContext } from "../../lib/FormContext";
function ActivityBar() {
const { getButtonValue } = useContext(FormContext);
return (
<div className={`${activity.activity__workSheet__numberButton}`}>
<button value={0} onFocus={(e) => getButtonValue(e)}>
<img
className={`${activity.activity__workSheet__img0}`}
src={"/assets/activityNumber-btn.png"}
alt="activity number button"
/>
.... more code
Parent Component:
const [numberButtonClicked, setNumberButtonClicked] = useState([]);
const getButtonValue = (e) => {
setNumberButtonClicked((prevButtonClicked) => [
...prevButtonClicked,
e?.target?.attributes[0].value
]);
};
return (
<Carousel>
<div ref={imageRef} style={{ height: "100%" }}>
{Object.entries(elements).map((element, i) => {
const { fields } = element[1];
if (fields) {
return (
<Element
key={i}
field={fields[0]}
id={i}
useReff={`answer${i}`}
currentValue={
numberButtonClicked === "" ? null : numberButtonClicked.join("")
}
/>
);
} else {
return;
}
})}
</div>
</Carousel>

Got a good working version figured out for this scenario, what I did was.
I have a onFocus method on my input tags that then takes in the event and calls a handleChange(e) function. Within that function I then save the currentInputId in a variable by using e?.target?.attributes[0]?.value and the previous InputId in a state variable and just check if the previous InputId is equal to the currentId user just focused on. If so then we'll add the next number user clicks into the same field, else if previousInputId !== currentInputId then make my user value state array empty, setNumberButtonClicked([]).

is it possible to select child element when you click on parent element in react, and the add a class to the parent element after an event

I am making a game with react, it's a memory game where you match images.so what I want to archive is, when I click on the div it selects the child of the div(the image) and then add class to the parent and then add class to the child itself. Based on the game logic I have to select the the child element first then if pass some conditions I then add a class to it and it's parent element. look at the code I currently have but it's not working, please help me out.
`
let currentElement;
const imageclick=(e)=>{
//select current image
currentElement=e.target.firstElementChild;
// some game logic the add class to child and parent
//add class to parent
currentElement.closest("div").classList.add("show");
//add class to child
currentElement.classList.remove("hidden")
}
const app=()=>{
return(
<div className="imgDiv transition" key={i} onClick={imageclick}>
<img src={img} alt="" className="tileImage hidden" />
</div>
)
}
`

There are multiple approaches.
One way is to store your images in an array of objects. This array is used to render all of your images. You could even shuffle the array to make the order random.
Inside your component you have a state. This state tracks the index of the currently selected image of the array. The initial state can be null to indicate that there is no current selected image.
While looping over your images, check for each image if the selectedImageIndex is equal to the index of the current image. If so, pass some extra classes.
(You don't need to toggle hidden class on the image. Use the show class on the div to either show or hide the child image).
Pass the index of the current image to the imageClick function in the onClick handler of the div. Whenever we click an image, we want to set the index of the image as our selectedImageIndex.
The component will now rerender and add the class to the clicked div.
Edit
I've modified the answer according to your comment. This example allows for 2 indexes to be stored into the state that tracks the selected images.
Whenever you click the same, the image is deselected. Whenever you click another image it will add its index to the state.
In the useEffect hook you can asses if the images corresponding to the indexes have a similar src or other property that matches.
(I would recommend creating a more robust system in which YOU say which images are the same instead of depending on the URL to be the same. E.g. two images can be the same while having different URL's)
const images = [
{
id: 'A',
src: 'your-image.jpg',
alt: 'Something about your image'
},
{
id: 'B'
src: 'your-other-image.jpg',
alt: 'Something about your image'
},
{
id: 'A' // The match to the other A
src: 'the-other-image-that-matches-the-first.jpg',
alt: 'Something about your image'
}
];
const App = () => {
const [selectedImageIndexes, setSelectedImageIndexes] = useState([null, null]);
const imageClick = index => {
setSelectedImageIndex(currentIndexes => {
// If the same index is clicked, deselect all.
if (currentIndexes.includes(index)) {
return [null, null];
}
// If no indexes have been set.
if (currentIndexes.every(index => index === null)) {
return [index, null];
}
// Set the second clicked image.
return [currentIndexes[0], index];
});
};
useEffect(() => {
// If both indexes are set.
if (selectedImageIndexes.every(index => index !== null) {
/**
* With the indexes in the selectedImageIndexes state,
* check if the images corresponding to the indexes are matches.
*/
if (selectedImageIndexes[0].id === selectedImageIndexes[1].id) {
// Match!
}
}
}, [selectedImageIndexes]);
return (
<div className="images">
{images.map((image, index) => {
const className = selectedImageIndex.includes(index) ? 'show' : '';
return (
<div className="imgDiv transition" key={`img-div-${index}`} onClick={() => imageClick(index)}>
<img src={image.src} className="tileImage" alt={image.alt} />
</div>
);
})}
</div>
)
};

How to scroll between sibling components in React?

I want to be able to scroll between table components in my React app. I have created a component for a table called FormattedTable which takes in props and displays all the information that I want.
A lot of the tables refer to other tables with clickable text. If you click on a reference to another table and it is not being displayed, I add the table to the display and the app automatically scrolls down to the bottom of the screen where the table has been added. However, if the table is already being displayed, I want the app to scroll to where it is being displayed already.
The clicking on the reference and adding another table all occurs in the FormattedTable.js file.
In my Home.js I have an array of objects called selected and this array contains all the objects that I want to be displayed in tables. I display the tables by mapping through the selected array creating a FormattedTable component on each iteration.
Home.js
<div className="rightColumn" style={{flex: 4}}>
{selected.length > 0 ? selected.map((obj, index) => {
return (
<div style={{width: '60%'}}>
<FormattedTable data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected}/>
</div>
)
})
: null}
</div>
Because the FormattedTables are being created dynamically in the Home.js file, I'm not sure how to scroll from one table to another in FormattedTable.js (since there is only 1 file but multiple instances).
Does anyone know how this would be possible to do in the FormattedTable.js file?
What I've tried so far is added a ref to the div that's being dynamically created in Home.js and also passed in a triggerScroll method to the FormattedTable component so that I can trigger the scroll when a reference is clicked on a table. The issue with this though is that it still scrolls to the last element as the value of the ref is (naturally) the last element of the array when the mapping stops.
<div className="rightColumn" style={{flex: 4}}>
{selected.length > 0 ? selected.map((obj, index) => {
return (
<div ref = {scrollRef} style={{width: '60%'}}>
<FormattedTable data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected} triggerScroll={scrollToTable}/>
</div>
)
})
: null}
</div>

Fixed myself:
Added an attribute to each object in the selected array called inFocus. The most recently selected object in the array has a value of true for this attribute.
I then added a ternary to setting the ref of the FormattedTable based on the inFocus attribute so only one object will be set as the ref at a time.
FormattedTable.js
//For selecting results
const select = (name) => {
//Deep clone object so that results doesn't change when selected changes
const obj = cloneDeep(data.find(element => element.name === name));
const refObj = data.find(element => element.name === name);
//If object is in the original JSON array
if(typeof refObj !== 'undefined') {
//If object is not in the selected array, add it to selected array
if(selected.find(element => element.name === name) === undefined) {
//Make the new object in focus and remove the focus for all the other objects
obj.inFocus = true;
copy.map((el) => {
if(el.name !== obj.name) {
el.inFocus = false
}
})
handleSelectedChange([...copy, obj]);
}
//Otherwise, set focus to selected object
else {
//Make the selected object in focus and remove the focus for all the other objects
copy.map((el) => {
if(el.name !== obj.name) {
el.inFocus = false
} else {
el.inFocus = true
}
})
handleSelectedChange([...copy]);
}
}
}
return (
<div ref={obj.inFocus ? messagesEndRef : null} style={{display: 'flex', flexDirection: 'row'}}>
...
)

How do I preload all the movies when all the tags are unselected?

I am building a small functionality for my project, basically i have an array of movie object that contains name of movies and tags assigned for that movies. I want to display the movies on the basis of tags selected, i.e if the tag “comedy” is selected , then all the movies that have “comedy” as one of their tags will be displayed
For this purpose I’m maintaining a map which consist of key as “tagname” and its “status” i.e (seleted/unselected) as value in form of state. I have written the logic for it, but my doubt is that whenever the page is loaded at first all the movies should be displayed because no tag is selected on load by default, how shall i implement it as i am initialising all the values in state(map) as false(unselected).
Please help, Here is the link for sandbox that i have implemented till now -
https://codesandbox.io/s/movie-tags-exp-4mur0?file=/src/Tags.js

You can make the following changes to your code,
Instead of maintaining the state as an object , You can maintain a list where you can add the tags and remove them
const [selectedTags, setSelectedTags] = useState([]);
with #1 in place now you can add and remove the tags as below
const manipulate = (tag) => {
if (selectedTags.includes(tag)) {
setSelectedTags((prevSelectedTags) =>
prevSelectedTags.filter((existingTag) => existingTag !== tag)
);
} else {
setSelectedTags((prevSelectedTags) => [...prevSelectedTags, tag]);
}
};
Updating the style for the selected tag will be changed as
backgroundColor: selectedTags.includes(tagname) ? "green" : "white"
You can remove the check as your filtered data is the derived state based on the selected Tags. Now you can filter as
const filteredData =
selectedTags.length > 0
? data.filter((movie) =>
movie.tags.some((tag) => selectedTags.includes(tag))
)
: data;
Once filtered you can use the filteredData to render your movies list
{filteredData.map((movie, index) => {
return (
<div key={index}>
<h3>{movie.name}</h3>
<p>{movie.desc}</p>
<br />
</div>
);
})}
Working Sandbox
Filter Movies Based on Tags

Array.map item to a state

How do I get the values of array.map outside of it?
For example:
array.map(index, item) => { return ( <Text>{item.ID}</Text> ) }
Ouside of it I have something like:
<Button onPress={() => this.editItem(CURRENT_ITEM_ID)}></Button>
Where CURRENT_ITEM_ID is the current item on a Card, for example.
Like Tinder I have an array of Cards to Swipe, that I'm mapping, but the Like button is not part of the Card. This way I'm not moving the Like button with the Card, instead it is static, I'm just moving the content of the card. So I need a way to access the current item from outside of the map. The Card has Text and ID. The component below have a Button that I need to click passing the item.ID of the current Card.
Is there a way to set this item to a state?
Thank you.

One solution is to create a state property that holds the id of the card that is showing, and then when the button is clicked, you grab that state and do something with it. Here is an example with onClicks and divs.
const arr = ['card1', 'card2', 'card3', 'card4'];
class App extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this);
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleClick(index) {
this.setState({ visibleCard: index });
}
handleButtonClick() {
console.log('this.state.visibleCard', this.state.visibleCard);
console.log('visibleCard', arr[this.state.visibleCard]);
}
render() {
return (
<div>
{arr.map((card, i) => <div onClick={() => this.handleClick(i)}>{card}</div>)}
<button onClick={this.handleButtonClick}>test</button>
</div>
)
}
}
The basic idea is that you tie the index to the card. A handler then sets that state to visible(not sure what this would be in your case since it seems like a mobile app). Then in your button, you use the state to grab the visible card and pass the data to whatever other function you need.

What I normally do is bind the event in the map function.
array.map( (item, key) => {
return (
<div>
<Text>{item.ID}</Text>
<button onClick={this.editItem.bind(this, item.ID)}>Edit</button>
</div>
)
}
Not sure what your HTML looks like, but you need to bind the function params in the map.