Select specific mapped ITEM - React - javascript

I'm trying to create an onClick event, that will select the pressed mapped item. Could anyone help?
const renderExample= () => {
return example.map((arrayItem, i) => {
const example = arrayItem.example;
const song =
arrayItem.song ||
"urltosong";
...
then in return
<div key={i}>
<SELECTABLE>
{example}
</SELECTABLE>
<SONG>{song}</SONG>
</div>
render return <div>{renderData()}</div>;
At the moment I have a list of selectable'examples' rendering. But I want to know which example has been pressed by the user specifically.

You can pass the complete item to the handleClick to play around. The code would be
const App = () => {
function handleClick(item){
console.log('item,item);
}
function renderData(){
// assuming you have data in example array
return example && example.map(item=> {
const example = arrayItem.example;
const song =arrayItem.song || "urltosong";
return (
<div key={i} onClick={()=>{handleClick(item)}>
<SELECTABLE>
{example}
</SELECTABLE>
<SONG>{song}</SONG>
</RecentMessages>
</div>
)
})
}
return <div>{renderData()}</div>
}

Maintain state for selected song and update when selection change.
Here is minimal working sample with stackblitz
import React, { Component } from 'react';
import { render } from 'react-dom';
const songs = ["first song", "song 2", "hello song"];
class App extends Component {
constructor() {
super();
this.state = {
song: 'hello song'
};
}
render() {
return (
<div>
<select onChange={(ev) => this.setState({song: ev.target.value})} value={this.state.song}>
{songs.map(x => <option value={x}> {x} </option>)}
</select>
<p>
{this.state.song}
</p>
</div>
);
}
}
render(<App />, document.getElementById('root'));

You can play with it like this:
// Supposing you're using React Functional Component
// Click handler
const handleSelect = (elementIndex) => {
console.log(`You clicked on element with key ${elementIndex}`)
}
// render()
// ... some other to-render stuff
// implying that code below have access to element's index (i in your map)
<Selectable onClick={e => handleSelect(i)}>
{example}
</Selectable>
// ...

Related

getting the most recent value in a react component

so I am trying to create add to faviourate button with icon.
so far I could make a logic if a user clicked the empty heart icon that it turns to be full heart icon and I was able to locate the item it was clicked on.
So far so good, my issue starts when products object recieves only the most recent item that is picked and loses the other items that are previously picked.
so for example If I want to click on 3 items to add them to faviourate, I see that the console.log(favProduct) only preserves the most recent item which is in my case number 3 and loses number 1 and 2.
My Question is How to get all Items I clicked on and not only the most recent one.
Edit This is where I get the product from, check the code below.
import React , { useState, useEffect } from 'react'
import { Row , Col } from 'react-bootstrap'
import Product from '../components/Product'
import axios from 'axios'
const HomeScreen = () =>{
const [products , setProducts] = useState([])
useEffect(()=>{
let componentMounted = true
const fetchProducts = async () =>{
const {data} = await axios.get('http://172.30.246.130:5000/api/products')
if( componentMounted){
setProducts(data)
}
}
fetchProducts()
return () =>{
componentMounted = false
}
},[])
console.log('products' , products)
return(
<>
<h2 className='my-3'>Latest Products</h2>
<Row>
{
products.map((product)=>(
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} rating = {product.rating} reviews={product.numReviews}/>
</Col>
))
}
</Row>
</>
)
}
export default HomeScreen
import React, { useState } from 'react'
const Fav = ({products}) => {
let [checked , setChecked] = useState(false)
let[favProduct ,setFavProduct] = useState([])
const toggle = ()=>{
(!checked) ? setChecked(true) : setChecked(false)
setFavProduct([...favProduct,products]) // problem is here
}
console.log(favProduct)
return (
<>
<span onClick={toggle}>
{
<i className={(checked) ? "fas fa-heart" : "far fa-heart"}></i>
}
</span>
</>
)
}
export default Fav
At the moment each of your Fav components looks like they're trying to manage the state for all of the favourites which is not a good idea.
The general idea is to make most UI components as dumb as possible (ie. just return the bare minimum given the props they're given). They can control their own state but usually you want to a parent to control the state by lifting state up, and have them pass down a handler that the dumb component can call when their listener is triggered.
In this example Fav accepts an id, a favoured, and a handleClick listener, and then just returns some JSX.
The parent component does all the state management.
const { useEffect, useState } = React;
// Accept some props
// Render the class based on the `favoured` prop
function Fav({ id, favoured, handleClick }) {
return (
<div className="icon">
<i
data-id={id}
className={favoured ? 'fa-solid fa-heart' : 'fa-regular fa-heart'}
onClick={handleClick}
> {id}</i>
</div>
);
}
function Example() {
// The parent component manages the state
const [ favourites, setFavourites ] = useState([]);
// When a favourite icon is clicked, get its id
// and if it's in the state, remove it, otherwise add it
function handleClick(e) {
const { id } = e.target.dataset;
const found = favourites.includes(id);
if (found) {
setFavourites(favourites.filter(fav => fav !== id));
} else {
setFavourites([...favourites, id]);
}
}
// In this example I'm using a loop to generate the
// the favourites, checking if the state includes the id
// (I have to coerce it to a string because that's what
// the data attributes return, and `i` will always be a number
// Pass down the handler that the favourite button
// will use to update the state
function getFavs() {
const favs = [];
for (let i = 0; i < 5; i++) {
const isFavoured = favourites.includes(i.toString());
const fav = (
<Fav
id={i}
favoured={isFavoured}
handleClick={handleClick}
/>
);
favs.push(fav);
}
return favs;
}
return (
<div>
{getFavs()}
</div>
);
};
ReactDOM.render(
<Example />,
document.getElementById('react')
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

React passing a component as a param to a function

I have a function that takes a Component as its' parameter. The function enables users to render their own popups instead of the ones I provide. However, I'm not able to add some props to said component before adding it to an array.
const addCustomSnack = (Snack, position) => {
let id = generate();
let snackProps = {
key: id,
id,
};
Snack.props = {...Snack.props, ...snackProps}
console.log(Snack);
buildStyle(position);
if (messagesNew.length >= 3) {
que.push(Snack);
addSnacks(messagesNew);
} else {
messagesNew = [...messagesNew, Snack];
addSnacks(messagesNew);
}
console.log(messagesNew);
};
This is what happens
Cannot assign to read only property 'props' of object '#<Object>'
I have tried the following code
const addCustomSnack = (Snack, position) => {
let id = generate();
console.log(Snack);
buildStyle(position);
if (messagesNew.length >= 3) {
que.push(Snack);
addSnacks(messagesNew);
} else {
messagesNew = [...messagesNew, <Snack key={id} id={id} />];
addSnacks(messagesNew);
}
console.log(messagesNew);
};
However, it will result in a React.createElement type error.
Codesandbox
Is there any way for me to add those props into the Snack component successfully?
This is exactly what a react High Order Component does: adding props to the component passed as parameter and return a component back.
If you are getting component in Snack then try below way
return <Snack {...snackProps} />
Using above code this will render any component that is passed to addCustomSnack
You could somehow keep an array of the component to render, each with a ref to the component and and its custom properties, then render it with a map, like so:
// Snack list
constructor(){
this.state = { snacks: [] }
}
// ...
const Lollipop = props => (
<div>
<h1>Lollipop</h1>
<span>Taste: </span> {props.taste}
</div>
)
const ChocolateBar = props => (
<div>
<h1>Chocolate bar</h1>
<span>With fudge: </span> {props.hasFudge ? 'yes': 'no'}
</div>
)
// Push a custom snack in the list
const addCustomSnack = (SnackType, props) => this.state.snacks.push({SnackType, props})
// ...
addSnack(Lollipop, {taste: 'cherry'})
addSnack(Lollipop, {taste: 'cola'})
addSnack(ChocolateBar, {hasFudge: true})
addSnack(ChocolateBar, {})
// render the lsit
const SnackList = () => {
<div>
{ this.state.snacks.map(({SnackType, props}, i) => (
<SnackType {...props} key={i} />
))}
</div>
}
React.cloneElement did exactly what I was looking for. Now, the user can give his own Component, and with cloneElement, I can extend the components props and add it into the array without problems.
const addCustomSnack = (Component, position) => {
let id = generate();
let props = {
removeSnack,
key: id,
id,
index: id
}
let Snack = React.cloneElement(Component, { ...props }, null);
buildStyle(position);
console.log(Snack)
if (messagesNew.length >= 3) {
que.push(Snack);
return addSnacks(messagesNew);
} else {
messagesNew = [...messagesNew, Snack];
return addSnacks(messagesNew);
}
};

Component Doesn't Update once the Parent component's state is updated

import React, {Component} from 'react';
import "./DisplayCard.css";
class DisplayCard extends Component {
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
return <div>{array[i].task}</div>
}
}
renderElements = (savedTasks) =>{
if (savedTasks.length === 0) {
return <div className="noTasks"> <p>You have no saved tasks.</p> </div>
} else {
return this.runArray(savedTasks)
}
}
render() {
return (
<div className="DisplayCardContainer">
{this.renderElements(this.props.saved)}
</div>
)
}
}
export default DisplayCard;
Hey guys,
I am new to react, so this is my child component that takes state from its parent component. My goal is to re-render component every time the array this.props.saved is changed.
This component renders: <p>You have no saved tasks.</p> when the this.props.saved.length === 0 and it renders <div>{array[0].task}</div> when i enter the first task, but it keeps it at <div>{array[0].task}</div> after that. I do see that the state keeps changing and this.props.saved keeps getting bigger, but my component doesn't change anymore.
Here's your problem:
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
//the first time we get here, it immediately ends the function!
return <div>{array[i].task}</div>
}
}
This loop only ever goes through once (at i=0) and then returns, exiting the runArray function and cancelling the rest of the loop. You probably wanted to return an array of elements, one for each of the tasks. I recommend using Array.map() for this, which takes an array and transforms each element, creating a new array:
runArray = (array) => {
return array.map(arrayElement => <div>arrayElement.task</div>);
}
This should do the trick. Note that React may complain about the fact that your elements lack the key property - see the documentation for more info: https://reactjs.org/docs/lists-and-keys.html
The problem is in your runArray function. Inside your loop, you are returning the first element and that's it. My guess is, you see only the first entry?
When you are trying to render all your tasks, I would suggest to map your tasks, e.g.
runArray = (array) => array.map(entry => <div>{entry.task}</div>)
It is because you write wrong the runArray function. You make a return in the for loop so it breaks after the first iteration. It will not iterate over the full array.
You need to transform your for loop to a map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
runArray = (array) => {
return array.map(v => <div>{v.task}</div>)
}
Does it fix your issue ?
You have to update state of the component to trigger render function. Your render function is not triggered because you did not update the state when the props changed. There are many ways to update state when props updated. One method may be the following:
componentWillReceiveProps(nextProps){
if (nextProps.saved !== this.props.saved) {
this.setState({ saved: nextProps.saved })
}
}
Also change yoour render function to use state of the component as below:
renderElements = () =>{
if (this.state.savedTasks.length === 0) {
return <div className="noTasks"> <p>You have no saved tasks.</p> </div>
} else {
return this.runArray(this.state.savedTasks)
}
}
Use .map so that it renders your task correctly. You can remove runArray and rely entirely on props so you don't need to pass arguments across functions as it can get messy quickly. Here's a quick running example of how to create a parent component where you can add a task and pass them into a component so that it renders your data when props are changed, therefore making it reactive.
class App extends React.Component {
state = {
taskLabel: "",
tasks: [
{
id: 1,
label: "Do something"
},
{
id: 2,
label: "Learn sometihng"
}
]
};
handleInput = evt => {
this.setState({
[evt.target.name]: evt.target.value
});
};
handleSubmit = evt => {
evt.preventDefault();
this.setState(prevState => ({
taskLabel: "",
tasks: [
...prevState.tasks,
{
id: prevState.tasks.length + 1,
label: this.state.taskLabel
}
]
}));
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
name="taskLabel"
type="text"
placeholder="Task label"
value={this.state.taskLabel}
onChange={this.handleInput}
/>
<button>Create task</button>
</form>
<DisplayCard tasks={this.state.tasks} />
</div>
);
}
}
class DisplayCard extends React.Component {
renderTasks = () => {
if (this.props.tasks.length !== 0) {
return this.props.tasks.map(task => (
<div key={task.id}>{task.label}</div>
));
} else {
return <div>No tasks</div>;
}
};
render() {
return <div>{this.renderTasks()}</div>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Array being populated with JSX Elements not rendering/updating

This may be a quick fix but I have been racking my brain for the past little while, and could really use another set of eyes to take a look.
Basically I am trying to render an array full of generated JSX elements. I fell like I have done this a million times, but it does not seem to work here.
Heres the code:
import React, { Fragment } from 'react'
import css from './Search.scss';
import Header from '../SectionHeader/Header';
import SearchItem from '../SearchItem/SearchItem';
const Search = (props) => {
const { coinObject, coinKeys } = props;
let searchResults = []; // Array in question
const findResults = (searchText) => {
searchResults = []; // Reset the array to blank for each new character typed in input
for(let i = 0; i < coinKeys.length; i++) {
const { FullName } = coinObject[coinKeys[i]]; // App specific logic, not important, or the problem here
if(FullName.toLowerCase().includes(searchText) && (searchResults.length < 5)) {
console.log(FullName, searchText); // Prints the correct Full name based off of the searched text
searchResults.push(<SearchItem key={i} searchText={FullName} />);
}
}
console.log(searchResults); // Prints the updated array with all react elements
}
return (
<Fragment>
<Header title='Find Coins!' />
<div className={css.searchContainer}>
<div className={css.inputContainer}>
<input onChange={input => findResults(input.target.value)} className={css.searchInput} type='text' placeholder='Start Typing a Coin'/>
</div>
{ searchResults }
</div>
</Fragment>
);
}
export default Search;
And the SearchItem Component, which is super simple:
import React from 'react'
import css from './SearchItem.scss';
const SearchItem = (props) => {
return (
<div className={css.searchItem}>
{props.searchText}
</div>
)
}
export default SearchItem;
For a little bit of context, this component just gets a giant object of data, and will display the first 5 instances of what matches the input text. I am trying to make one of those search filter things, where as you type it suggests things that match from the data.
The array gets updated, and I can see the JSX objects in the array, they just do not render. I have a feeling it is due to the array not re-rendering?
Any help is much appreciated. Thanks!
You could make the Search component into a stateful component and store the searchResults in your state instead, so that when it is updated your component will be re-rendered.
Example
class Search extends React.Component {
state = { searchResults: [] };
findResults = searchText => {
const { coinObject, coinKeys } = this.props;
const searchResults = [];
for (let i = 0; i < coinKeys.length; i++) {
const { FullName } = coinObject[coinKeys[i]];
if (
FullName.toLowerCase().includes(searchText) &&
searchResults.length < 5
) {
searchResults.push(FullName);
}
}
this.setState({ searchResults });
};
render() {
return (
<Fragment>
<Header title="Find Coins!" />
<div className={css.searchContainer}>
<div className={css.inputContainer}>
<input
onChange={event => findResults(event.target.value)}
className={css.searchInput}
type="text"
placeholder="Start Typing a Coin"
/>
</div>
{this.state.searchResults.map((fullName, i) => (
<SearchItem key={i} searchText={fullName} />
))}
</div>
</Fragment>
);
}
}

Remove child component on click of link

I am teaching myself react at the moment, I have a component that looks at the state and when a new item is added it appends a child component to itself. What I am now trying to do is remove the added child component via a click. However I cannot seem to get the natural event of a link to stop, if I do e.preventDefault() I get preventDefault is not a function of undefined.
Below is my code,
import React, { Component } from 'react';
import InvoiceForm from './InvoiceForm';
import InvoiceItemForm from './InvoiceItemForm';
class GenerateInvoice extends Component {
constructor(props) {
super(props);
this.state = {
invoice: {
items : []
}
};
this.onAddChild = this.onAddChild.bind(this);
this.removeItem = this.removeItem.bind(this);
}
render() {
const children = [];
for (var i = 0; i < this.state.invoice.items.length; i += 1) {
children.push(
<InvoiceItemForm
key={i}
number={i}
remove={this.removeItem} />
);
}
return(
<div>
<a href="" onClick={this.onAddChild}>Add New Item</a>
{children}
</div>
)
}
removeItem = (e, itemIndex) => {
e.stopPropagation();
alert("..removing...");
// let invoice = this.state.invoice;
// let updatedItems = this.state.invoice.items.splice(index, 1); //remove element
// let updateInvoice = { ...invoice, items:updatedItems}
// this.setState({ invoice }); //update state
}
onAddChild = (e) => {
e.preventDefault();
let invoice = this.state.invoice;
// creates an updated version of the items without changing the original value
let updatedItems = invoice.items.push({ 'id': 'INV001' });
// creates a new version of the invoice with the updated items
let updateInvoice = { ...invoice, items: updatedItems };
// update the invoice on the state to the new version
this.setState({ invoice });
}
}
export default GenerateInvoice;
child component
import React from 'react';
const InvoiceItemForm = (props) => {
console.log(props);
return(
<div>
<p>Hello {props.number}</p>
<a href="" onClick={props.remove(props.number)}>Remove</a>
</div>
)
}
export default InvoiceItemForm;
and a link to my sandbox,
https://codesandbox.io/s/0qx9w1qrwv
On the InvoiceItemForm component, onClick={props.remove(props.number)}, only here you have the reference to the event object.
You can change to to something like:
onClick={(e) => {
e.preventDefault();
props.remove(props.number);
}}
EDIT:
If you'd like to avoid creating a function each render, you can use something like:
class InvoiceItemForm extends React.Component {
handleClick = (e) => {
e.preventDefault();
this.props.remove(props.number);
}
render() {
console.log(this.props);
return(
<div>
<p>Hello {this.props.number}</p>
<a href="" onClick={this.handleClick}>Remove</a>
</div>
)
}
}
You should bind the index of the item to remove directly to the removeItem method.
Refactoring your render method:
render() {
return(
<div>
<a href="" onClick={this.onAddChild}>Add New Item</a>
{this.state.invoice.items.map((item, index) => {
return (
<InvoiceItemForm
key={index}
number={index}
remove={this.removeItem.bind(null, index)}
/>
);
})}
</div>
);
}
This will bind the index as the first argument to the removeItem function being passed in the props, while leaving the object binding untouched (so the context for the method remains the GenerateInvoice component. When the event is passed by the event handler, it will show up as the second argument.
So the handler definition should be:
removeItem(index, e) {
e.preventDefault();
...your removal code here...
}
And finally the super simple event handling in the child component:
<a href="" onClick={props.remove}>Remove</a>
Although I would use a <button> element instead to remove the whole default event handling & propagation altogether. <a> should be used exclusively for navigating content.

Categories