I set button onClick as a parameter in the child component and drag and use onClick in the parent component.
The child component Room .
type Props = {
items?: [];
onClick?: any;
}
const Room = ({ onClick, items: [] }: Props) => {
return (
<div>
{items.length ? (
<>
{items.map((item: any, index: number) => {
return (
<>
<button key={index} onClick={() => { console.log('hi'); onClick }}>{item.name}</button>
</>
)
}
</>
)
</div>
)
}
This is the parent component.
const LoadingRoom = () => {
const handleWaitingRoomMove = (e: any) => {
e.preventDefault();
console.log('Hello Move')
}
return (
<>
<Room
items={[
{
name: "Waiting Room",
onClick: {handleWaitingRoomMove}
},
{
name: "Host Room",
},
]}
>
</Room>
</>
)
}
I want to call parent component's onClick handleWaitingRoomMove but it's not getting called.
However, console.log('hi') on the button is called normally whenever the button is clicked. Only button is not called. Do you know why?
onlick is a attribute to the child element. so move it outside of the items array
<Room
onClick={handleWaitingRoomMove}
items={[
{
name: "Waiting Room",
},
{
name: "Host Room",
},
]}
>
In the child, missing () for onClick
onClick={(ev) => { console.log('hi'); onClick(ev) }}
Demo
You are passing onClick in items, not direct props
<button key={index} onClick={item.onClick}>{item.name}</button>
so your component will be
type Props = {
items?: [];
}
const Room = ({ items: [] }: Props) => {
return (
<div>
{items.length ? (
<>
{items.map((item: any, index: number) => {
return (
<>
<button key={index} onClick={item.onClick}>{item.name}</button>
</>
)
}
</>
)
</div>
)
}
It would probably be more advantageous to have one handler that does the work, and use that to identify each room by type (using a data attribute to identify the rooms). That way you keep your data and your component logic separate from each other. If you need to add in other functions at a later stage you can.
const { useState } = React;
function Example({ data }) {
// Handle the room type by checking the value
// of the `type` attribute
function handleClick(e) {
const { type } = e.target.dataset;
switch (type) {
case 'waiting': console.log('Waiting room'); break;
case 'host': console.log('Host Room'); break;
case 'guest': console.log('Guest Room'); break;
default: console.log('Unknown room'); break;
}
}
// Keep the room data and the handler separate
return (
<div>
{data.map(obj => {
return (
<Room
key={obj.id}
data={obj}
handleClick={handleClick}
/>
);
})}
</div>
);
}
// Apply a data attribute to the element
// you're clicking on, and just call the handler
// `onClick`
function Room({ data, handleClick }) {
const { type, name } = data;
return (
<button
data-type={type}
onClick={handleClick}
>{name}
</button>
);
}
const data = [
{ id: 1, type: 'waiting', name: 'Waiting Room' },
{ id: 2, type: 'host', name: 'Host Room' },
{ id: 3, type: 'guest', name: 'Guest Room' }
];
ReactDOM.render(
<Example data={data} />,
document.getElementById('react')
);
button:not(:last-child) { margin-right: 0.25em; }
<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>
Related
I'm trying to render a closable tab bar using some Material UI components, and I'm having trouble implementing the onDelete method for when the user wants to close a tab. I'm passing the data set, an array of objects, as a prop called dataSet. I want to update it whenever the user closes a tab but it doesn't re-render; all tabs still appear. When I console.log this.state.dataSet on each click however, I see that the tabs are getting deleted. What am I doing wrong?
class ClosableTabs extends Component {
state = {
tabIndex: 0,
dataSet: this.props.dataSet,
};
onDelete = id => {
this.setState(prevState => {
const updatedDataSet = prevState.dataSet.filter(tab => tab.id !== id);
return {
dataSet: updatedDataSet,
};
}, console.log(this.state.dataSet);
};
renderTabs = dataSet => {
return dataSet.map(data => {
return (
<Tab
key={data.id}
label={
<span>
{data.title}
</span>
<Button
icon="close"
onClick={() => this.onDelete(data.id)}
/>
}
/>
);
});
};
render() {
const { value, dataSet, ...rest } = this.props;
return (
<TabBar value={this.state.tabIndex} onChange={this.onChange} {...rest}>
{this.renderTabs(dataSet)}
</TabBar>
);
}
}
export default Tabs;
and here is my data set that I pass as props when I use <ClosableTabs />
const dataSet = [
{
id: 1,
title: 'title 1',
},
{
id: 2,
title: 'title 2',
},
{
id: 3,
title: 'title 3',
},
];
When you render dataSet, you use the array you get from props (which never changes):
render() {
const { value, dataSet, ...rest } = this.props; // dataSet comes from props
return (
<TabBar value={this.state.tabIndex} onChange={this.onChange} {...rest}>
{this.renderTabs(dataSet)} // renderTabs renders this.props.dataSet
</TabBar>
);
}
}
instead, render dataSet which comes from your state (you should use different naming for this.props.dataSet and this.state.dataSet to avoid this kind of mistakes):
render() {
const { value, ...rest } = this.props;
const { dataSet } = this.state; // dataSet now comes from state
return (
<TabBar value={this.state.tabIndex} onChange={this.onChange} {...rest}>
{this.renderTabs(dataSet)} // renderTabs renders this.state.dataSet
</TabBar>
);
}
}
The problem is you are rendering the component with props instead of state.
Your render function should look likes this:
render() {
const { value, dataSet, ...rest } = this.props;
return (
<TabBar value={this.state.tabIndex} onChange={this.onChange} {...rest}>
{this.renderTabs(this.state.dataSet)}
</TabBar>
);
}
}
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!
I got the following React exercise with 2 components in an interview that I did not manage to make it compile...
The question was the following:
Update the Counter component to take onIncrement callbacks as props and ensure they update the counter's values independently. Each callback should take a single, integer value as a parameter which is the amount to increment the counter's existing value by.
Comments in the code but the my problem is how to implement the "onIncrement" function.
const { Component } = React;
const { render } = ReactDOM;
// state data for 3 counters
const data = [
{ id: 1, value: 1 },
{ id: 2, value: 2 },
{ id: 3, value: 3 }
];
// Counter Component
class Counter extends Component {
render() {
const { value } = this.props;
return (
<div className="counter">
<b>{value}</b>
<div className="counter-controls">
<button className="button is-danger is-small">-</button>
//I call the function passed
<button className="button is-success is-small" onClick={()=>{onIncrement(this.props.value)}}>+</button>
</div>
</div>
);
}
}
class App extends Component {
constructor(props, context) {
super(props, context);
}
onIncrement=(value)=>{
//I tried several things here but I did not manage to make it work. I guess that I need also the id of the object...
}
render() {
return (
<div>
{data.map(counter => (
<Counter
key={counter.id}
value={counter.value}
//I pass the callback function to the component
onIncrement={this.onIncrement}
/>
))}
</div>
);
}
}
render(
<App/>
, document.querySelector('#root'))
Basically, you'll want to use the id as a way to determine which value you need to update. How you have it set up, you won't be able to know which value needs to be updated (because you don't know which id was clicked) nor will the value be saved.
NOTE: The example below takes the id from event.target.id and the value from event.target.value which is then deconstructed in the handleChange callback. This is a more common and elegant solution than passing a value to a callback and then passing it and another value to another callback (more work, more code, but same functionality).
Best solution: https://codesandbox.io/s/rjmx8vw99p
components/UpdateQuantity.js
import React, { Component, Fragment } from "react";
export default class App extends Component {
state = {
items: [
{ id: "Apples", quantity: 0 },
{ id: "Strawberries", quantity: 0 },
{ id: "Grapes", quantity: 0 },
{ id: "Apricots", quantity: 0 }
]
};
handleChange = ({ target: { id, value } }) => {
this.setState(prevState => ({
items: prevState.items.map(item => {
const nextVal = item.quantity + ~~value; // ~~ === parseInt(val, 10) -- required because the "value" is turned into a string when placed on a DOM element
return id === item.id
? { id, quantity: nextVal > 0 ? nextVal : 0 }
: { ...item };
})
}));
};
render = () => (
<div className="container">
<h1>Updating Values Inside Array</h1>
{this.state.items.map(({ id, quantity }) => (
<div key={id} className="container">
<div>
{id} ({quantity})
</div>
<button
id={id}
value={1}
style={{ marginRight: 10 }}
className="uk-button uk-button-primary"
onClick={this.handleChange}
>
+
</button>
<button
id={id}
value={-1}
style={{ marginRight: 10 }}
className="uk-button uk-button-danger"
onClick={this.handleChange}
>
-
</button>
</div>
))}
</div>
);
}
Another solution: https://codesandbox.io/s/yq961275rv (not recommended as it requires an extra component and an extra callback -- BUT there's no binding required in the render method nor is there an anonymous function () => {} in the onClick callback)
components/UpdateQuantity.js
import React, { Component, Fragment } from "react";
import Button from "./button";
export default class App extends Component {
state = {
items: [
{ id: "Apples", quantity: 0 },
{ id: "Strawberries", quantity: 0 },
{ id: "Grapes", quantity: 0 },
{ id: "Apricots", quantity: 0 }
]
};
handleChange = (id, val) => {
this.setState(prevState => ({
items: prevState.items.map(item => {
const nextVal = item.quantity + val;
return id === item.id
? { id, quantity: nextVal > 0 ? nextVal : 0 }
: { ...item };
})
}));
};
render = () => (
<div className="container">
<h1>Updating Values Inside Array</h1>
{this.state.items.map(props => (
<div key={props.id} className="container">
<div>
{props.id} ({props.quantity})
</div>
<Button
{...props}
className="uk-button uk-button-primary"
handleChange={this.handleChange}
value={1}
>
+
</Button>
<Button
{...props}
disabled={props.quantity === 0}
className="uk-button uk-button-danger"
handleChange={this.handleChange}
value={-1}
>
-
</Button>
</div>
))}
</div>
);
}
components/button.js
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
export default class Button extends PureComponent {
static propTypes = {
children: PropTypes.string.isRequired,
className: PropTypes.string,
disabled: PropTypes.bool,
id: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
value: PropTypes.number.isRequired
};
handleClick = () => {
this.props.handleChange(this.props.id, this.props.value);
};
render = () => (
<button
disabled={this.props.disabled || false}
className={this.props.className}
onClick={this.handleClick}
style={{ marginRight: 10 }}
>
{this.props.children}
</button>
);
}
I know an answer has been accepted, but it doesn't actually satisfy the requirements fully, i.e.
Each callback should take a single, integer value as a parameter which is the amount to increment the counter's existing value by.
The accepted answer takes the event object as a parameter which is not the specified requirement. The only way to strictly satisfy the expected requirement is to bind unique
"...onIncrement callbacks as props..."
for each counter. This approach has drawbacks and performance implications as discussed in this article
Working example at https://codesandbox.io/s/j2vxj620z9
My question is, how can I disable a particular button in a Button array depends on a click?
Below there is a SearchField component which consists of multiple buttons in it, I want to disable just the button clicked, but all the buttons turn to disabled, how can I solve this?
state = {
redirect: false,
loading: false,
alreadyAddedFav: false,
disabled: false
}
onClickedHandler = (recipe_id, token) => {
if (!this.props.isAuthenticated) {
this.setState({ redirect: true })
}
else {
const favData = {
recipe_id: recipe_id,
userId: this.props.userId
}
if (this.props.favRecipes.length > 0) {
if (!this.props.favRecipes.some(item => item.recipe_id === recipe_id)) {
console.log("added in the loop!")
this.props.onFav(favData, token);
this.setState({ disabled: true });
} else {
this.setState({ alreadyAddedFav: true })
console.log("it is already in the fav list!")
console.log(recipe_id)
}
} else {
this.props.onFav(favData, token);
this.setState({ disabled: true });
}
}
}
render() {
return (
<SearchResult
disabled={this.state.disabled}
key={ig.recipe_id}
title={ig.title}
imgSrc={ig.image_url}
clicked={() => this.onClickedHandler(ig.recipe_id, this.props.token)}
>
</SearchResult>)}
Here is a simple example, maybe you can enhance this according to your situation.
class App extends React.Component {
state = {
disableds: [],
};
handleClick = i =>
this.setState( currentState => ( {
disableds: [ ...currentState.disableds, i ],
} ) );
render() {
return (
<div className="App">
<Buttons onClick={this.handleClick} disableds={this.state.disableds} />
</div>
);
}
}
const Buttons = ( props ) => {
const buttons = [ { text: "foo" }, { text: "bar" }, { text: "baz" } ];
return (
<div>
{buttons.map( ( button, i ) => (
<button
key={button.text}
disabled={props.disableds.includes( i )}
onClick={() => props.onClick( i )}
>
{button.text}
</button>
) )}
</div>
);
};
ReactDOM.render( <App />, document.getElementById( "root" ) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
What I don't like here is the way I added the onClick handler to the button element. In this way, this arrow function will be recreated in every render. Not so big deal but I prefer using function references. To avoid this we can extract each button element into its component and use a separate handler again.
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
});
}