React: adding className to single element of mapped array - javascript

I have a child component that maps images from an items array. Upon clicking any item, I am calling addFavorite, which is passed in from the parent.
I am trying to find a way to also have a className added to only the specific image(s) I click on. Any approach I've tried adds the class to all the mapped out elements upon onClick.
var classNames = require('classnames');
class Results extends Component {
render() {
let items = this.props.items
var resultClass = classNames({
'result': true,
});
return (
<div className="resultst" key="results">
{items.map(item =>
<div className = {resultClass}
key={item.id}
onClick= {() => {
this.props.addFavorite(item)
}
}>
<img alt= "" src={item.images.downsized.url} />
</div>
)}
</div>
);
}
}

You could create a separate favorites array in your parent component that you store all the favorite items in, and send that to your child component and see if the item is included in the favorites array:
Example
class App extends Component {
state = {
items: [{ id: 1, text: "item 1" }, { id: 2, text: "item 2" }],
favorites: []
};
addFavorite = item => {
const { items, favorites } = this.state;
const copyFavorites = [...favorites];
if (!favorites.some(favorite => favorite.id === item.id)) {
copyFavorites.push(item);
this.setState({ favorites: copyFavorites });
}
};
render() {
const { items, favorites } = this.state;
const { addFavorite } = this;
return (
<div>
<Results
items={items}
favorites={favorites}
addFavorite={addFavorite}
/>
</div>
);
}
}
class Results extends Component {
render() {
const { items, favorites, addFavorite } = this.props;
return (
<div>
{items.map(item => (
<div
key={item.id}
onClick={() => {
addFavorite(item);
}}
>
{favorites.includes(item) && 'Favorite: '}
{item.text}
</div>
))}
</div>
);
}
}

Related

How can I open only the clicked row data in React?

I have defined a state variable called fullText.
fullText default value is false.
When Full Text is clicked, I want to reverse my state value and enable the text to be closed and opened. But when it is clicked, the texts in all rows in the table are opened, how can I make it row specific?
{
!this.state.fullText ?
<div onClick={() => this.setState({ fullText: !this.state.fullText })}
className="text-primary cursor-pointer font-size-14 mt-2 px-2"
key={props.data?.id}>
Full Text
</div>
:
<>
<div onClick={() => this.setState({ fullText: !this.state.fullText
})}className="text-primary cursor-pointer font-size-14 mt-2 px-2"
key={props.data?.id}>
Short Text
</div>
<span>{ props.data?.caption}</span>
</>
}
It appears that the code sample in the question is repeated for each row, but there is only 1 state fullText (showMore in the CodeSandbox) that is common for all these rows. Hence they all open or close together.
If you want individual open/close feature for each row, then you need 1 such state per row. An easy solution could be to embed this state with the data of each row:
export default class App extends Component {
state = {
data: [
{
id: 1,
description: "aaaaa",
showMore: false // Initially closed
},
// etc.
]
};
render() {
return (
<>
{this.state.data.map((e) => (
<>
{ /* Read the showMore state of the row, instead of a shared state */
e.showMore === false ? (
<div onClick={() => this.setState({ data: changeShow(this.state.data, e.id, true) })}>
Show description{" "}
</div>
) : (
<>
<div onClick={() => this.setState({ data: changeShow(this.state.data, e.id, false) })}>
Show less{" "}
</div>
<span key={e.id}>{e.description} </span>
</>
)}
</>
))}
</>
);
}
}
/**
* Update the showMore property of the
* row with the given id.
*/
function changeShow(data, id, show) {
for (const row of data) {
if (row.id === id) { // Find the matching row id
row.showMore = show; // Update the property
}
}
return data;
}
there are two specific desired outputs you might want. you can either make it open only one row at a time. you can also make them individual row specific to open or close independently.
For making specific row behave on its own you can store a list of ids in state for the expanded view and show the relevant component or behaviour.
class RowSpecific extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedIds: [],
data: [
{ id: "1", otherInfo: {} },
{ id: "2", otherInfo: {} },
{ id: "3", otherInfo: {} },
],
};
this.handleExpandHide = this.handleExpandHide.bind(this);
}
handleExpandHide(expand, id) {
if (!id) return;
let sIds = [...this.state.selectedIds];
if (expand) sIds.push(id);
else sIds.remove((rId) => rId === id);
this.setState({
selectedIds: sIds,
});
}
render() {
let list = this.state.data.map((data) => {
let show = this.state.selectedIds.find((id) => data.id === id);
return show ? (
<ExpandedView
data={data}
onExpandHide={(e) => {
this.handleExpandHide(true, data.id);
}}
/>
) : (
<CollapseView
data={data}
onExpandHide={(e) => {
this.handleExpandHide(true, data.id);
}}
/>
);
});
return list;
}
}
For making it open only one at a time you can save the clicked id in state and then when showing it only the matched id in state should be shown as open . rest are closed.
class SingleRow extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedId: "2",
data: [
{ id: "1", otherInfo: {} },
{ id: "2", otherInfo: {} },
{ id: "3", otherInfo: {} },
],
};
}
render() {
let list = this.state.data.map((data) => {
let show = data.id === this.state.selectedId;
return show ? <ExpandedView data={data} /> : <CollapseView data={data} />;
});
return list;
}
}

Adding clicked items to new array in React

I am making API calls and rendering different components within an object. One of those is illustrated below:
class Bases extends Component {
constructor() {
super();
this.state = {
'basesObject': {}
}
}
componentDidMount() {
this.getBases();
}
getBases() {
fetch('http://localhost:4000/cupcakes/bases')
.then(results => results.json())
.then(results => this.setState({'basesObject': results}))
}
render() {
let {basesObject} = this.state;
let {bases} = basesObject;
console.log(bases);
//FALSY values: undefined, null, NaN, 0, false, ""
return (
<div>
{bases && bases.map(item =>
<button key={item.key} className="boxes">
{/* <p>{item.key}</p> */}
<p>{item.name}</p>
<p>${item.price}.00</p>
{/* <p>{item.ingredients}</p> */}
</button>
)}
</div>
)
}
}
The above renders a set of buttons. All my components look basically the same.
I render my components here:
class App extends Component {
state = {
ordersArray: []
}
render() {
return (
<div>
<h1>Bases</h1>
<Bases />
<h1>Frostings</h1>
<Frostings />
<h1>Toppings</h1>
<Toppings />
</div>
);
}
}
I need to figure out the simplest way to, when a button is clicked by the user, add the key of each clicked element to a new array and I am not sure where to start. The user must select one of each, but is allowed to select as many toppings as they want.
Try this
We can use the same component for all categories. All the data is handled by the parent (stateless component).
function Buttons({ list, handleClick }) {
return (
<div>
{list.map(({ key, name, price, isSelected }) => (
<button
className={isSelected ? "active" : ""}
key={key}
onClick={() => handleClick(key)}
>
<span>{name}</span>
<span>${price}</span>
</button>
))}
</div>
);
}
Fetch data in App component, pass the data and handleClick method into Buttons.
class App extends Component {
state = {
basesArray: [],
toppingsArray: []
};
componentDidMount() {
// Get bases and toppings list, and add isSelected attribute with default value false
this.setState({
basesArray: [
{ key: "bases1", name: "bases1", price: 1, isSelected: false },
{ key: "bases2", name: "bases2", price: 2, isSelected: false },
{ key: "bases3", name: "bases3", price: 3, isSelected: false }
],
toppingsArray: [
{ key: "topping1", name: "topping1", price: 1, isSelected: false },
{ key: "topping2", name: "topping2", price: 2, isSelected: false },
{ key: "topping3", name: "topping3", price: 3, isSelected: false }
]
});
}
// for single selected category
handleSingleSelected = type => key => {
this.setState(state => ({
[type]: state[type].map(item => ({
...item,
isSelected: item.key === key
}))
}));
};
// for multiple selected category
handleMultiSelected = type => key => {
this.setState(state => ({
[type]: state[type].map(item => {
if (item.key === key) {
return {
...item,
isSelected: !item.isSelected
};
}
return item;
})
}));
};
// get final selected item
handleSubmit = () => {
const { basesArray, toppingsArray } = this.state;
const selectedBases = basesArray.filter(({ isSelected }) => isSelected);
const selectedToppings = toppingsArray.filter(({ isSelected }) => isSelected);
// submit the result here
}
render() {
const { basesArray, toppingsArray } = this.state;
return (
<div>
<h1>Bases</h1>
<Buttons
list={basesArray}
handleClick={this.handleSingleSelected("basesArray")}
/>
<h1>Toppings</h1>
<Buttons
list={toppingsArray}
handleClick={this.handleMultiSelected("toppingsArray")}
/>
</div>
);
}
}
export default App;
CSS
button {
margin: 5px;
}
button.active {
background: lightblue;
}
I think the following example would be a good start for your case.
Define a handleClick function where you can set state with setState as the following:
handleClick(item) {
this.setState(prevState => {
return {
...prevState,
clickedItems: [...prevState.clickedItems, item.key]
};
});
}
Create an array called clickedItems in constructor for state and bind handleClick:
constructor() {
super();
this.state = {
basesObject: {},
clickedItems: [],
}
this.handleClick = this.handleClick.bind(this);
}
You need to add a onClick={() => handleClick(item)} handler for onClick:
<button key={item.key} className="boxes" onClick={() => handleClick(item)}>
{/* <p>{item.key}</p> */}
<p>{item.name}</p>
<p>${item.price}.00</p>
{/* <p>{item.ingredients}</p> */}
</button>
I hope that helps!

How to toggle css class of a single element in a .map() function in React

I have a .map() function where I'm iterating over an array and rendering elements, like so:
{options.map((option, i) => (
<TachyonsSimpleSelectOption
options={options[i]}
key={i}
onClick={() => this.isSelected(i)}
selected={this.toggleStyles("item")}
/>
I am toggling the state of a selected element like so:
isSelected (i) {
this.setState({ selected: !this.state.selected }, () => { console.log(this.state.selected) })
}
Using a switch statement to change the styles:
toggleStyles(el) {
switch (el) {
case "item":
return this.state.selected ? "bg-light-gray" : "";
break;
}
}
And then passing it in my toggleStyles method as props to the className of the TachyonsSimpleSelectOption Component.
Problem
The class is being toggled for all items in the array, but I only want to target the currently clicked item.
Link to Sandbox.
What am I doing wrong here?
You're using the selected state incorrectly.
In your code, to determine whether it is selected or not, you depends on that state, but you didn't specify which items that is currently selected.
Instead saving a boolean state, you can store which index is currently selected so that only specified item is affected.
This may be a rough answer, but I hope I can give you some ideas.
on your render:
{options.map((option, i) => (
<TachyonsSimpleSelectOption
options={options[i]}
key={i}
onClick={() => this.setState({ selectedItem: i })}
selected={this.determineItemStyle(i)}
/>
))}
on the function that will determine the selected props value:
determineItemStyle(i) {
const isItemSelected = this.state.selectedItem === i;
return isItemSelected ? "bg-light-gray" : "";
}
Hope this answer will give you some eureka moment
You are not telling react which element is toggled. Since the state has just a boolean value selected, it doesn't know which element is selected.
In order to do that, change your isSelected function to :
isSelected (i) {
this.setState({ selected: i }, () => {
console.log(this.state.selected) })
}
Now, the React state knows that the item on index i is selected. Use that to toggle your class now.
In case you want to store multiple selected items, you need to store an array of indices instead of just one index
TachyonsSimpleSelectOption.js:
import React from 'react';
class Option extends React.Component {
render() {
const { selected, name } = this.props;
return(
<h1
onClick={() => this.props.onClick()}
style={{backgroundColor: selected ? 'grey' : 'white'}}
>Hello {name}!</h1>
)
}
}
export default Option;
index.js:
import React from "react";
import { render } from "react-dom";
import TachyonsSimpleSelectOption from "./TachyonsSimpleSelectOption";
const options = ["apple", "pear", "orange"];
const styles = {
selected: "bg-light-gray"
};
class Select extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
selected: []
};
this.handleClick = this.handleClick.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.isSelected = this.isSelected.bind(this);
}
handleBlur() {
this.toggleMenu(close);
}
handleClick(e) {
this.toggleMenu();
}
toggleMenu(close) {
this.setState(
{
open: !this.state.open
},
() => {
this.toggleStyles("menu");
}
);
}
toggleStyles(el, index) {
switch (el) {
case "menu":
return this.state.open ? "db" : "dn";
break;
case "item":
const { selected } = this.state;
return selected.indexOf(index) !== -1;
break;
}
}
isSelected(i) {
let { selected } = this.state;
if (selected.indexOf(i) === -1) {
selected.push(i);
} else {
selected = selected.filter(index => index !== i);
}
this.setState({ selected});
}
render() {
const { options } = this.props;
return (
<div
className="flex flex-column ba"
onBlur={this.handleBlur}
tabIndex={0}
>
<div className="flex-row pa3" onClick={this.handleClick}>
<span className="flex-grow-1 w-50 dib">Title</span>
<span className="flex-grow-1 w-50 dib tr">^</span>
</div>
<div className={this.toggleStyles("menu")}>
{options.map((option, i) => (
<TachyonsSimpleSelectOption
name={options[i]}
key={i}
onClick={() => this.isSelected(i)}
selected={this.toggleStyles("item", i)}
/>
))}
</div>
</div>
);
}
}
render(<Select options={options} />, document.getElementById("root"));
And Link to Sandbox.

Show and Hide specific component in React from a loop

I have a button for each div. And when I press on it, it has to show the div with the same key, and hide the others.
What is the best way to do it ? This is my code
class Main extends Component {
constructor(props) {
super(props);
this.state = {
messages: [
{ message: "message1", key: "1" },
{ message: "message2", key: "2" }
]
};
}
handleClick(message) {
//something to show the specific component and hide the others
}
render() {
let messageNodes = this.state.messages.map(message => {
return (
<Button key={message.key} onClick={e => this.handleClick(message)}>
{message.message}
</Button>
)
});
let messageNodes2 = this.state.messages.map(message => {
return <div key={message.key}>
<p>{message.message}</p>
</div>
});
return <div>
<div>{messageNodes}</div>
<div>{messageNodes2}</div>
</div>
}
}
import React from "react";
import { render } from "react-dom";
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
messages: [
{ message: "message1", id: "1" },
{ message: "message2", id: "2" }
],
openedMessage: false
};
}
handleClick(id) {
const currentmessage = this.state.messages.filter(item => item.id === id);
this.setState({ openedMessage: currentmessage });
}
render() {
let messageNodes = this.state.messages.map(message => {
return (
<button key={message.id} onClick={e => this.handleClick(message.id)}>
{message.message}
</button>
);
});
let messageNodes2 = this.state.messages.map(message => {
return (
<div key={message.key}>
<p>{message.message}</p>
</div>
);
});
const { openedMessage } = this.state;
console.log(openedMessage);
return (
<div>
{openedMessage ? (
<div>
{openedMessage.map(item => (
<div>
{" "}
{item.id} {item.message}{" "}
</div>
))}
</div>
) : (
<div> Not Opened</div>
)}
{!openedMessage && messageNodes}
</div>
);
}
}
render(<Main />, document.getElementById("root"));
The main concept here is this following line of code.
handleClick(id) {
const currentmessage = this.state.messages.filter(item => item.id === id);
this.setState({ openedMessage: currentmessage });
}`
When we map our messageNodes we pass down the messages id. When a message is clicked the id of that message is passed to the handleClick and we filter all the messages that do not contain the id of the clicked message. Then if there is an openedMessage in state we render the message, but at the same time we stop rendering the message nodes, with this logic {!openedMessage && messageNodes}
Something like this. You should keep in state only message key of visible component and in render method you should render only visible component based on the key preserved in state. Since you have array of message objects in state, use it to render only button that matches the key.
class Main extends Component {
constructor(props) {
super(props);
this.state = {
//My array messages: [],
visibleComponentKey: '',
showAll: true
};
handleClick(message) {
//something to show the specific component and hide the others
// preserve in state visible component
this.setState({visibleComponentKey : message.key, showAll: false});
};
render() {
const {visibleComponentKey, showAll} = this.state;
return (
<div>
{!! visibleComponentKey && ! showAll &&
this.state.messages.filter(message => {
return message.key == visibleComponentKey ? <Button onClick={e => this.handleClick(message)}>{message.message}</Button>
) : <div /> })
}
{ !! showAll &&
this.state.messages.map(message => <Button key={message.key} onClick={e => this.handleClick(message)}>{message.message}</Button>)
}
</div>
);
}
}
I haven't tried it but it gives you a basic idea.
I cannot reply to #Omar directly but let me tell you, this is the best code explanation for what i was looking for! Thank you!
Also, to close, I added a handleClose function that set the state back to false. Worked like a charm!
onCloseItem =(event) => {
event.preventDefault();
this.setState({
openedItem: false
});
}

Delete functionality is not working properly-Reactjs

i have created delete functionality,in which when user clicks delete[X] it has to get deleted from the respected row w.r.t datagrid view used in react
passing id as an parameter
used _find index(loadlash)
problem:
1) selected Rows are not getting deleted.
code:
onclick event
<div>
<button onClick={() => this.deleteHandler(params.value)}>X</button>
</div>
Delete code:
deleteHandler = (id) => {
const arrayPerson = this.props.rowData;
const index = _.findIndex(this.props.rowData, { id: id });
if (arrayPerson.indexOf(id) > -1) {
arrayPerson.splice(index, 1);
this.setState({ rows: arrayPerson });
}
can any one help me on this issue.
This is a working example for this what if different is that you are passing the data from parent to child for that u can do multiple thing.
The Parent Component.
class TestComp extends React.Component {
constructor() {
super();
this.state = { listItems: [{ id: 1, text: "abc" }, { id: 2, text: "bcd" }, { id: 3, text: "dec" }] }
this.handleRowClick = this.handleRowClick.bind(this);
}
handleRowClick(id) {
const listItems = this.state.listItems;
let copyListItems = [];
listItems.forEach(function (item) {
let objCopy = Object.assign({}, item);
copyListItems.push(objCopy);
});
let updatedArray = _.remove(copyListItems, function (item) { return item.id == id; });
this.setState({ listItems: copyListItems });
}
render() {
return (
<div>
<ChildComp
list={this.state.listItems}
deleteHandler={this.handleRowClick}
/>
</div>
)
}
}
The Child Component that is receiving List items as props and when clicked the parent handler is being called which will update the List items and setState of Parent which will update the list being provided to child component hence it will be rendered.
export class ChildComp extends React.Component {
render() {
let list = this.props.list.map((obj) =>
<div key={obj.id} id={obj.id} style={{ padding: "10px", backgroundColor: "grey", border: "1px solid black" }} onClick={() => { this.props.deleteHandler(obj.id) }}> {obj.text} </div>
);
return (
<div >
{list}
</div>
)
}
}

Categories

Resources