I want to change the text of a specific button when I click on that button in React. But the issue is when I click the button the title will change for all buttons!
class Results extends Component {
constructor() {
super();
this.state = {
title: "Add to watchlist"
}
}
changeTitle = () => {
this.setState({ title: "Added" });
};
render() {
return (
<div className='results'>
{
this.props.movies.map((movie, index) => {
return (
<div className='card wrapper' key={index}>
<button className='watchListButton' onClick={this.changeTitle}>{this.state.title}</button>
</div>
)
})
}
</div>
)
}
}
You would need to come up with a mechanism to track added/removed titles per movie. For that, you would have to set your state properly. Example:
this.state = {
movies: [
{id: 1, title: 'Casino', added: false},
{id: 2, title: 'Goodfellas', added: false}
]
This way you can track what's added and what's not by passing the movie id to the function that marks movies as Added/Removed. I have put together this basic Sandbox for you to get you going in the right direction:
https://codesandbox.io/s/keen-moon-9dct9?file=/src/App.js
And here is the code for future reference:
import React, { Component } from "react";
import "./styles.css";
class App extends Component {
constructor() {
super();
this.state = {
movies: [
{ id: 1, title: "Casino", added: false },
{ id: 2, title: "Goodfellas", added: false }
]
};
}
changeTitle = (id) => {
this.setState(
this.state.movies.map((item) => {
if (item.id === id) item.added = !item.added;
return item;
})
);
};
render() {
const { movies } = this.state;
return (
<div className="results">
{movies.map((movie, index) => {
return (
<div className="card wrapper" key={index}>
{movie.title}
<button
className="watchListButton"
onClick={() => this.changeTitle(movie.id)}
>
{movie.added ? "Remove" : "Add"}
</button>
</div>
);
})}
</div>
);
}
}
export default App;
Related
I'm encountering an issue while compiling my reactJS component:
import React, { Component } from "react";
class StatefullComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, name: "Perceuse" },
{ id: 2, name: "disqueuse" },
{ id: 3, name: "marteau" },
{ id: 4, name: "clé de 17" },
{ id: 5, name: "meuleuse" }
],
newItem: ""
};
this.addNewItemToState = this.addNewItemToState.bind(this);
this.handleChange = this.handleChange.bind(this);
this.removeThisItem = this.removeThisItem.bind(this);
}
sortItems() {
this.setState({
items: this.state.items.sort()
});
}
addNewItemToState() {
this.setState({
items: [...this.state.items, this.state.newItem],
newItem: ""
});
}
removeThisItem(bidule) {
const tmparray = this.state.items.filter(bazar => {
return bazar.id !== bidule;
});
console.log(tmparray);
this.setState({
items: tmparray
});
}
handleChange(e) {
this.setState({
newItem: e.target.value
});
}
render() {
return (
<div className="statefull">
<h2>Satefull component, build with a class</h2>
<ul>
{this.state.items.map(item => (
<li className="lambda">
{item}
<button onClick={this.removeThisItem(item.id)}>
supprimer cet item
</button>
</li>
))}
</ul>
<input
type="text"
placeholder="Ajouter un element"
value={this.state.newItem}
onChange={this.handleChange}
/>
<button onClick={this.addNewItemToState}>Ajouter</button>
</div>
);
}
}
export default StatefullComponent;
and my App.js:
import "./App.scss";
import React from "react";
import StatelessComponent from "./components/stateless-component";
import StatefullComponent from "./components/statefull-component";
function App() {
return (
<div className="App">
<StatefullComponent />
</div>
);
}
export default App;
Why do I get this error?
'Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.'
Did I badly formatted my items array in my state? It's important to me to have an id because I want to be able to delete an item.
Any clue? Thanks.
That's because you are trying to render an object in map. Change your ul to this:
<ul>
{
this.state.items.map((item, index) => <li className="lambda" key={index}>{item.name}<button onClick={this.removeThisItem(item.id)}>supprimer cet item</button></li>)
}
</ul>
Hope this works for you.
You need to display name using {item.name} but not using {item}. This is reason you get that error.
Also I noticed the following issues:
1-) You need to add a key property to li tag like this: <li className="lambda" key={item.id}>. React needs key property in a list.
2-) You need to change onClick={this.removeThisItem(item.id)} to <button onClick={() => this.removeThisItem(item.id)}>. You are calling the removeThisItem method, but it shouldn't be called.
import React, { Component } from "react";
class StatefullComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, name: "Perceuse" },
{ id: 2, name: "disqueuse" },
{ id: 3, name: "marteau" },
{ id: 4, name: "clé de 17" },
{ id: 5, name: "meuleuse" }
],
newItem: ""
};
this.addNewItemToState = this.addNewItemToState.bind(this);
this.handleChange = this.handleChange.bind(this);
this.removeThisItem = this.removeThisItem.bind(this);
}
sortItems() {
this.setState({
items: this.state.items.sort()
});
}
addNewItemToState() {
this.setState({
items: [...this.state.items, this.state.newItem],
newItem: ""
});
}
removeThisItem(bidule) {
const tmparray = this.state.items.filter(bazar => {
return bazar.id !== bidule;
});
console.log(tmparray);
this.setState({
items: tmparray
});
}
handleChange(e) {
this.setState({
newItem: e.target.value
});
}
render() {
return (
<div className="statefull">
<h2>Satefull component, build with a class</h2>
<ul>
{this.state.items.map(item => (
<li className="lambda" key={item.id}>
{item.name}
<button onClick={() => this.removeThisItem(item.id)}>
supprimer cet item
</button>
</li>
))}
</ul>
<input
type="text"
placeholder="Ajouter un element"
value={this.state.newItem}
onChange={this.handleChange}
/>
<button onClick={this.addNewItemToState}>Ajouter</button>
</div>
);
}
}
export default StatefullComponent;
Playground
I want to render a list of restaurants inside select tag with options so that the user can choose a restaurant.
What i try so far:
class Banner extends Component {
this.state = {
restaurant: "",
}
restaurantlist = () => {
var res=[]
var { restaurants } = this.props;
restaurants = restaurants.filter(rest => {
return rest.name.toUpperCase().indexOf(this.state.restaurant.toUpperCase()) !== -1 &&
rest.publish === true })
console.log(restaurants)
res = restaurants.map((item) => (
<li key={item.id}>{item.name}</li>))
return res;
}
<input onChange={(e)=>{ const restaurant = e.target.value;
this.setState({restaurant:restaurant})}}
type="text" name="restaurant" className="res__search"
placeholder="Restaurant"
/>
First you need some corrections with state:
this.state = {
restaurants: [],
// ...
}
You need restaurants as Array not as String.
This is a basic implementation of Select/Option with React:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
restaurants: [
{ id: 1, name: 'First' },
{ id: 2, name: 'Second' },
{ id: 3, name: 'Third' }
],
selected: 2,
};
}
handleChange = e => {
this.setState({
selected: e.target.value,
})
}
render() {
return (
<div>
<select value={this.state.selected} onChange={this.handleChange}>
{this.state.restaurants.map(x => <option value={x.id}>{x.name}</option>)}
</select>
<h4>State:</h4>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
};
}
React.render(<Test />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.9/react-dom.min.js"></script>
<div id="app"></div>
Note:
Please read React documentation and also take a look at this example
The code below shows each user info on users list button click.
Now I want fetch each users record from database on users list button click.
In the open() function, I have implemented the code below
open = (id,name) => {
alert(id);
alert(name);
//start axios api call
const user_data = {
uid: 'id',
uname: 'name'
};
this.setState({ loading_image: true }, () => {
axios.post("http://localhost/data.php", { user_data })
.then(response => {
this.setState({
chatData1: response.data[0].id,
chatData: response.data,
loading_image: false
});
console.log(this.state.chatData);
alert(this.state.chatData1);
})
.catch(error => {
console.log(error);
});
});
}
In class OpenedUser(), I have initialize in the constructor the code below
chatData: []
In the render method have implemented the code
<b> Load Message from Database for each user ({this.state.chatData1})</b>
<div>
{this.state.chatData.map((pere, i) => (<li key={i}>{pere.lastname} - {pere.id}----- {pere.username}</li>))}
</div>
Here is my Issue:
My problem is that the Axios Api is getting the result but am not seeing any result in the render method.
but I can see it in the console as per code below
Array(1)
0: {id: "1", firstname: "faco", lastname: "facoyo"}
length: 1
Here is an example of json api response.
[{"id":"1","firstname":"faco","lastname":"facoyo"}]
Here is the full code
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import { Link } from 'react-router-dom';
import axios from 'axios';
class User extends React.Component {
open = () => this.props.open(this.props.data.id, this.props.data.name);
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<button onClick={() => this.open(this.props.data.id,this.props.data.name)}>{this.props.data.name}</button>
</div>
</React.Fragment>
);
}
}
class OpenedUser extends React.Component {
constructor(props) {
super(props);
this.state = {
chatData: [],
hidden: false,
};
}
componentDidMount(){
} // close component didmount
toggleHidden = () =>
this.setState(prevState => ({ hidden: !prevState.hidden }));
close = () => this.props.close(this.props.data.id);
render() {
return (
<div key={this.props.data.id} style={{ display: "inline-block" }}>
<div className="msg_head">
<button onClick={this.close}>close</button>
<div>user {this.props.data.id}</div>
<div>name {this.props.data.name}</div>
{this.state.hidden ? null : (
<div className="msg_wrap">
<div className="msg_body">Message will appear here</div>
<b> Load Message from Database for each user ({this.state.chatData1}) </b>
<div>
{this.state.chatData.map((pere, i) => (
<li key={i}>
{pere.lastname} - {pere.id}----- {pere.username}
</li>
))}
</div>
</div>
)}
</div>
</div>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
shown: true,
activeIds: [],
data: [
{ id: 1, name: "user 1" },
{ id: 2, name: "user 2" },
{ id: 3, name: "user 3" },
{ id: 4, name: "user 4" },
{ id: 5, name: "user 5" }
],
};
}
toggle() {
this.setState({
shown: !this.state.shown
});
}
open = (id,name) => {
alert(id);
alert(name);
//start axios api call
const user_data = {
uid: 'id',
uname: 'name'
};
this.setState({ loading_image: true }, () => {
axios.post("http://localhost/apidb_react/search_data.php", { user_data })
.then(response => {
this.setState({
chatData1: response.data[0].id,
chatData: response.data,
loading_image: false
});
console.log(this.state.chatData);
alert(this.state.chatData1);
})
.catch(error => {
console.log(error);
});
});
// end axios api call
this.setState((prevState) => ({
activeIds: prevState.activeIds.find((user) => user === id)
? prevState.activeIds
: [...prevState.activeIds, id]
}));
}
close = id => {
this.setState((prevState) => ({
activeIds: prevState.activeIds.filter((user) => user !== id),
}));
};
renderUser = (id) => {
const user = this.state.data.find((user) => user.id === id);
if (!user) {
return null;
}
return (
<OpenedUser key={user.id} data={user} close={this.close}/>
)
}
renderActiveUser = () => {
return (
<div style={{ position: "fixed", bottom: 0, right: 0 }}>
{this.state.activeIds.map((id) => this.renderUser(id)) }
</div>
);
};
render() {
return (
<div>
{this.state.data.map(person => (
<User key={person.id} data={person} open={this.open} />
))}
{this.state.activeIds.length !== 0 && this.renderActiveUser()}
</div>
);
}
}
The problem is you're making the request in the App component and storing in state but you're trying to access the state in a child component so it will never actually read the data.
To fix this you need to pass in the chat data via prop
<OpenedUser
chatData={this.state.chatData}
key={user.id}
data={user}
close={this.close}
/>
Note: In my runnable example, I've replaced your api endpoint with a mock api promise.
const mockApi = () => {
return new Promise((resolve, reject) => {
const json = [{ id: "1", firstname: "faco", lastname: "facoyo" }];
resolve(json);
});
};
class User extends React.Component {
open = () => this.props.open(this.props.data.id, this.props.data.name);
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<button
onClick={() => this.open(this.props.data.id, this.props.data.name)}
>
{this.props.data.name}
</button>
</div>
</React.Fragment>
);
}
}
class OpenedUser extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
componentDidMount() {} // close component didmount
toggleHidden = () =>
this.setState(prevState => ({ hidden: !prevState.hidden }));
close = () => this.props.close(this.props.data.id);
render() {
return (
<div key={this.props.data.id} style={{ display: "inline-block" }}>
<div className="msg_head">
<button onClick={this.close}>close</button>
<div>user {this.props.data.id}</div>
<div>name {this.props.data.name}</div>
{this.state.hidden ? null : (
<div className="msg_wrap">
<div className="msg_body">Message will appear here</div>
<b>
{" "}
Load Message from Database for each user ({this.state.chatData1}
){" "}
</b>
<ul>
{this.props.chatData.map((pere, i) => (
<li key={i}>
{pere.lastname} - {pere.id}----- {pere.username}
</li>
))}
</ul>
</div>
)}
</div>
</div>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
shown: true,
chatData: [],
activeIds: [],
data: [
{ id: 1, name: "user 1" },
{ id: 2, name: "user 2" },
{ id: 3, name: "user 3" },
{ id: 4, name: "user 4" },
{ id: 5, name: "user 5" }
]
};
}
toggle() {
this.setState({
shown: !this.state.shown
});
}
open = (id, name) => {
alert(id);
alert(name);
//start axios api call
const user_data = {
uid: "id",
uname: "name"
};
// this.setState({ loading_image: true }, () => {
// axios
// .post("http://localhost/apidb_react/search_data.php", { user_data })
// .then(response => {
// this.setState({
// chatData1: response.data[0].id,
// chatData: response.data,
// loading_image: false
// });
// console.log(this.state.chatData);
// alert(this.state.chatData1);
// })
// .catch(error => {
// console.log(error);
// });
// });
this.setState({ loading_image: true }, () => {
mockApi().then(data => {
this.setState({
chatData1: data[0].id,
chatData: data,
loading_image: false
});
});
});
// end axios api call
this.setState(prevState => ({
activeIds: prevState.activeIds.find(user => user === id)
? prevState.activeIds
: [...prevState.activeIds, id]
}));
};
close = id => {
this.setState(prevState => ({
activeIds: prevState.activeIds.filter(user => user !== id)
}));
};
renderUser = id => {
const user = this.state.data.find(user => user.id === id);
if (!user) {
return null;
}
return (
<OpenedUser
chatData={this.state.chatData}
key={user.id}
data={user}
close={this.close}
/>
);
};
renderActiveUser = () => {
return (
<div style={{ position: "fixed", bottom: 0, right: 0 }}>
{this.state.activeIds.map(id => this.renderUser(id))}
</div>
);
};
render() {
return (
<div>
{this.state.data.map(person => (
<User key={person.id} data={person} open={this.open} />
))}
{this.state.activeIds.length !== 0 && this.renderActiveUser()}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<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>
I see a few missing points in your code namely you are using li without ul which is a kind of invalid markup, then you have mapping for .username which is undefined field according to response which may also throw error.
I am making a notes taking application with React, when I click on a note in sidebar it opens in content area, then while changing text it updates the notes state, updates the current opened note with the current content inside the input area.
Can I do it with spread operator?
here is the full code on codesandbox
class App extends React.Component {
constructor() {
super();
this.state = {
notesList: [
{key: 0, title: "title of first note", note: "this is the first note"},
{key: 1, title: "title of second note", note: "this is another note"}
],
inputValue: null,
currentKey: null
};
}
noteTitleClicked = value => {
this.setState({
inputValue: value.note,
currentKey: value.key
});
};
updateNoteDetails = e => {
this.setState({
inputValue: e.target.value
});
};
render() {
const notes = this.state.notesList.map(note => (
<li key={note.key} onClick={e => this.noteTitleClicked(note)}>
{note.title}
</li>
));
const inputValue = this.state.inputValue;
return (
<div className="App">
<header>Header</header>
<div className="main">
<article>
{inputValue == null ? (
""
) : (
<input
className="noteDetails"
value={this.state.inputValue}
onChange={this.updateNoteDetails}
/>
)}
</article>
<nav>
<ul>{notes}</ul>
</nav>
</div>
<footer>Footer</footer>
</div>
);
}
}
Try this:
updateNoteDetails = e => {
const updated = this.state.notesList.map(n => {
if (n.key === this.state.currentKey)
return { ...n, note: e.target.value };
return n;
});
this.setState({
inputValue: e.target.value,
notesList: updated
});
};
This this is the demo: https://codesandbox.io/s/k591vor8v3
I am having 4 buttons each button have name id and selected boolean flag.
What I am trying to achieve is, on click of button, boolean button flag should be changed of that particular button. For this, I need to setState in map function for that particular button Id.
My issue is I am unable to setState in map function for that particular clicked button, its btnSelected should be changed
My aim is to create a multi-select deselect button.Its kind of interest selection for the user and based on that reflect the UI as well my array. Here is my code.
Thanks in anticipation.
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
export default class Test extends Component {
constructor(props, context) {
super(props, context);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: "",
numbers: [1, 2, 3, 4, 5],
posts: [
{
id: 1,
topic: "Animal",
btnSelected: false
},
{
id: 2,
topic: "Food",
btnSelected: false
},
{
id: 3,
topic: "Planet",
btnSelected: false
},
{ id: 4, topic: "Nature", btnSelected: false }
],
allInterest: []
};
}
handleChange(e) {
//console.log(e.target.value);
const name = e.target.name;
const value = e.target.value;
this.setState({ [name]: value });
}
getInterest(id) {
this.state.posts.map(post => {
if (id === post.id) {
//How to setState of post only btnSelected should change
}
});
console.log(this.state.allInterest);
if (this.state.allInterest.length > 0) {
console.log("Yes we exits");
} else {
console.log(id);
this.setState(
{
allInterest: this.state.allInterest.concat(id)
},
function() {
console.log(this.state);
}
);
}
}
render() {
return (
<div>
{this.state.posts.map((posts, index) => (
<li
key={"tab" + index}
class="btn btn-default"
onClick={() => this.getInterest(posts.id)}
>
{posts.topic}
<Glyphicon
glyph={posts.btnSelected === true ? "ok-sign" : "remove-circle"}
/>
</li>
))}
</div>
);
}
}
Here's how you do something like this:
class App extends Component {
state = {
posts: [{
name: 'cat',
selected: false,
}, {
name: 'dog',
selected: false
}]
}
handleClick = (e) => {
const { posts } = this.state;
const { id } = e.target;
posts[id].selected = !this.state.posts[id].selected
this.setState({ posts })
}
render() {
return (
<div>
<form>
{this.state.posts.map((p, i) => {
return (
<div>
<label>{p.name}</label>
<input type="radio" id={i} key={i} checked={p.selected} onClick={this.handleClick} />
</div>
)
})}
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Working example here.
You can do this by passing the index from the map into each button's handleClick function, which would then return another function that can be triggered by an onClick event.
In contrast to Colin Ricardo's answer, this approach avoids adding an id prop onto each child of the map function that is only used for determining the index in the handleClick. I've modified Colin's example here to show the comparison. Notice the event parameter is no longer necessary.
class App extends Component {
state = {
posts: [{
name: 'cat',
selected: false,
}, {
name: 'dog',
selected: false
}]
}
handleClick = (index) => () => {
const { posts } = this.state;
posts[index].selected = !this.state.posts[index].selected
this.setState({ posts })
}
render() {
return (
<div>
<form>
{this.state.posts.map((p, i) => {
return (
<div>
<label>{p.name}</label>
<input type="checkbox" key={i} checked={p.selected} onClick={this.handleClick(i)} />
</div>
)
})}
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Working example here