I have 2 components. Display and DisplayList. Components work together to display values from local storage. Everything works fine. However When I activate handleDelete method. Values are deleted from local storage but react doesn't re-render list.
Summary: I want for react to re render my displayValues after I activate method handleDelete()
Github Link
Display.JSX
import {DisplayList} from './DisplayList';
class Display extends Component {
constructor(props){
let data = JSON.parse(localStorage.getItem('data'));
super(props)
this.state = {
data: data,
}
// Methods
this.displayValues = this.displayValues.bind(this);
}
displayValues(){
return this.state.data.map((data1, index) =>
<DisplayList
key = {index}
email = {data1.email}
password = {data1.password}
/>
)
}
render() {
return (
<ul className="list-group">
{this.displayValues()}
</ul>
)
}
}
DisplayList.JSX
import {Button} from 'react-bootstrap';
export class DisplayList extends Component {
constructor(props){
super(props)
// Methods
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete(){
const data = JSON.parse(localStorage.getItem('data'));
for (let index = 0; index < data.length; index++) {
if(this.props.email === data[index].email &&
this.props.password === data[index].password){
data.splice(data[index], 1);
}
}
localStorage.setItem('data', JSON.stringify(data));
}
render() {
return (
<div className = "mt-4">
<li className="list-group-item text-justify">
Email: {this.props.email}
<br />
Password: {this.props.password}
<br />
<Button variant = "info mr-4 mt-1">Edit</Button>
<Button onClick = {this.handleDelete} variant = "danger mt-1">Delete</Button>
</li>
</div>
)
}
}
One possible way you could achieve this is by sending down a callback function as a prop from Display.JSX to DisplayList.JSX. And from handleDelete, trigger the callback to the parent and set the state in it. Sample code follows.
Display.jsx
import {DisplayList} from './DisplayList';
class Display extends Component {
constructor(props){
let data = JSON.parse(localStorage.getItem('data'));
super(props)
this.state = {
data: data,
}
// Methods
this.displayValues = this.displayValues.bind(this);
}
displayValues(){
return this.state.data.map((data1, index) =>
<DisplayList
key = {index}
email = {data1.email}
password = {data1.password}
updateList = {this.updateList}
/>
)
}
// This is the method that will be called from the child component.
updateList = (data) => {
this.setState({
data
});
}
render() {
return (
<ul className="list-group">
{this.displayValues()}
</ul>
)
}
}
DisplayList.jsx
import {Button} from 'react-bootstrap';
export class DisplayList extends Component {
constructor(props){
super(props)
// Methods
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete(){
const data = JSON.parse(localStorage.getItem('data'));
for (let index = 0; index < data.length; index++) {
if(this.props.email === data[index].email &&
this.props.password === data[index].password){
data.splice(data[index], 1);
}
}
localStorage.setItem('data', JSON.stringify(data));
this.props.updateList(data);
}
render() {
return (
<div className = "mt-4">
<li className="list-group-item text-justify">
Email: {this.props.email}
<br />
Password: {this.props.password}
<br />
<Button variant = "info mr-4 mt-1">Edit</Button>
<Button onClick = {this.handleDelete} variant = "danger mt-1">Delete</Button>
</li>
</div>
)
}
}
You can do like accepted answer and you can have other way to do this also, like below:
Moved your handleDelete event in Parent itself, where your state data is there.
class Display extends Component {
constructor(props){
let data = JSON.parse(localStorage.getItem('data'));
super(props)
this.state = {
data: data || [{email: 'j', password: "dsv" }],
}
}
handleDelete(email, password){
const data = JSON.parse(localStorage.getItem('data'));
data = data ? data : this.state.data
for (let index = 0; index < data.length; index++) {
if(email === data[index].email &&
password === data[index].password){
data.splice(data[index], 1);
}
}
localStorage.setItem('data', JSON.stringify(data));
this.setState({data});
}
render() {
console.log(this.state)
debugger
return (
<ul className="list-group">
{this.state.data.map((data1, index) =>
<DisplayList
key = {index}
email = {data1.email}
password = {data1.password}
handleDelete = {() => this.handleDelete(data1.email,data1.password )}
/>
)}
</ul>
)
}
}
and in DisplayList
export default class DisplayList extends Component {
constructor(props){
super(props)
}
render() {
return (
<div className = "mt-4">
<li className="list-group-item text-justify">
Email: {this.props.email}
<br />
Password: {this.props.password}
<br />
<Button variant = "info mr-4 mt-1">Edit</Button>
<Button onClick = {this.props.handleDelete} variant = "danger mt-1">Delete</Button>
</li>
</div>
)
}
}
Working Demo
Related
so I was working on a basic Todo app using React.js and I was wondering why the todo component does not automatically re-render once the state changed (the state contains the list of todos- so adding a new todo would update this array)? It is supposed to re-render the Header and the Todo component of the page with the updated array of todos passed in as props. Here is my code:
import React from 'react';
import './App.css';
class Header extends React.Component {
render() {
let numTodos = this.props.todos.length;
return <h1>{`You have ${numTodos} todos`}</h1>
}
}
class Todos extends React.Component {
render() {
return (
<ul>
{
this.props.todos.map((todo, index) => {
return (<Todo index={index} todo={todo} />)
})
}
</ul>
)
}
}
class Todo extends React.Component {
render() {
return <li key={this.props.index}>{this.props.todo}</li>
}
}
class Form extends React.Component {
constructor(props) {
super(props);
this.addnewTodo = this.addnewTodo.bind(this);
}
addnewTodo = () => {
let inputBox = document.getElementById("input-box");
if (inputBox.value === '') {
return;
}
this.props.handleAdd(inputBox.value);
}
render() {
return (
<div>
<input id="input-box" type="text"></input>
<button type="submit" onClick={this.addnewTodo}>Add</button>
</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { todos: ['task 1', 'task 2', 'task 3']}
this.handleNewTodo = this.handleNewTodo.bind(this);
}
handleNewTodo(todo) {
let tempList = this.state.todos;
tempList.push(todo);
this.setState = { todos: tempList };
}
render() {
return (
<div>
<Header todos={this.state.todos} />
<Todos todos={this.state.todos} />
<Form todos={this.state.todos} handleAdd={this.handleNewTodo} />
</div>
)
}
}
You are not updating the state correctly.
You need to make a copy of the this.state.todos, add the new todo in the copied array and then call this.setState function
handleNewTodo(todo) {
let tempList = [...this.state.todos];
tempList.push(todo);
this.setState({ todos: tempList });
}
Notice that this.setState is a function
You're updating state incorrectly,
handleNewTodo(todo) {
let tempList = [...this.state.todos];
tempList.push(todo);
this.setState({ todos: tempList });
}
This is the correct syntax.
I have two components Display.jsx and DisplayList.jsx. Components work together to display values from local storage. The problem is with DisplayList.JSX handleDelete() method loop.
I don't get it why it deletes first element instead of selected element? And how to fix that?
Github
Display.jsx
import {DisplayList} from './DisplayList';
class Display extends Component {
constructor(props){
let data = JSON.parse(localStorage.getItem('data'));
super(props)
this.state = {
data: data,
}
// Methods
this.displayValues = this.displayValues.bind(this);
}
displayValues(){
return this.state.data.map((data1, index) =>
<DisplayList
key = {index}
email = {data1.email}
password = {data1.password}
updateList = {this.updateList}
/>
)
}
// This is the method that will be called from the child component.
updateList = (data) => {
this.setState({
data
});
}
render() {
return (
<ul className="list-group">
{this.displayValues()}
</ul>
)
}
}
export default Display;
DisplayList.jsx
import React, { Component } from 'react'
import {Button, Modal, Form} from 'react-bootstrap';
export class DisplayList extends Component {
constructor(props){
super(props)
this.state = {
email: '',
password: '',
show: false,
};
// Methods
this.handleDelete = this.handleDelete.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event){
this.setState({
[event.target.name]: event.target.value
})
};
handleDelete(){
const data = JSON.parse(localStorage.getItem('data'));
for (let index = 0; index < data.length; index++) {
if(this.props.email === data[index].email &&
this.props.password === data[index].password){
console.log(this.props.email);
console.log(data[index]);
data.splice(data[index], 1);
}
console.log('loop count');
}
localStorage.setItem('data', JSON.stringify(data));
this.props.updateList(data);
}
render() {
return (
<div className = "mt-4">
<li className="list-group-item text-justify">
Email: {this.props.email}
<br />
Password: {this.props.password}
<br />
<Button onClick = {this.handleShow} variant = "info mr-4 mt-1">Edit</Button>
<Button onClick = {this.handleDelete} variant = "danger mt-1">Delete</Button>
</li>
</div>
)
}
}
Instead of:
data.splice(data[index], 1);
Try rewriting entire array:
data = [
...data.slice(0, index),
...data.slice(index + 1)
];
handleDelete(){
const data = JSON.parse(localStorage.getItem('data'));
const filteredData = data.filter(
x => !(x.email === this.props.email && x.password === this.props.password)
);
localStorage.setItem('data', JSON.stringify(filteredData));
this.props.updateList(filteredData);
}
Im having issues with react todo list.
When submitted the list item appears fine.
I should then be able to delete this be clicking on the item,however nothing happens. As soon as i try to add another item the pages refreshes and all items are removed?
console log just shows
[object object]
App
import React, { Component } from 'react';
import './App.css';
import TodoItem from './TodoItem';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.addItems = this.addItems.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
addItems(e) {
if (this._inputElement !== '') {
let newItem = {
text: this._inputElement.value,
key: Date.now()
};
this.setState(prevState => {
return {
items: prevState.items.concat(newItem)
};
});
}
this._inputElement.value = '';
e.preventDefault();
}
deleteItem(key) {
console.log('key is' + key);
console.log('itesm as' + this.state.items);
var filteredItems = this.state.items.filter(function(item) {
return item.key !== key;
});
this.setState = {
items: filteredItems
};
}
render() {
return (
<div className="app">
<h2> things to do</h2>
<div className="form-inline">
<div className="header">
<form onSubmit={this.addItems}>
<input
ref={a => (this._inputElement = a)}
placeholder="enter task"
/>
<button type="submit">add</button>
</form>
</div>
</div>
<TodoItem entries={this.state.items} delete={this.deleteItem} />
</div>
);
}
}
export default App;
todoItem
import React, { Component } from 'react';
//search bar
class TodoItem extends Component {
constructor(props) {
super(props);
this.createTasks = this.createTasks.bind(this);
}
createTasks(item) {
return (
<li onClick={() => this.delete(item.key)} key={item.key}>
{item.text}
</li>
);
}
delete(key) {
console.log('key is ' + key);
this.props.delete(key);
}
render() {
let todoEntries = this.props.entries;
let listItems = todoEntries.map(this.createTasks);
return <ul className="theList">{listItems}</ul>;
}
}
export default TodoItem;
You are assigning to setState instead of using it as a method that it is
Change
this.setState = {
items: filteredItems
};
to
this.setState({
items: filteredItems
});
And that is also the reason it will reload the app, as you have overwritten the setState method you should be getting an error that setState is not a function and it would crash the app.
Here's the parts of my code that are useful:
class Answers extends Component {
constructor(props) {
super(props);
this.state = {
answers: Array(4).fill(""),
correctAnswers: [],
};
this.handleUpdate = this.handleUpdate.bind(this);
}
// let event = {
// index: 1,
// value: 'hello'
// };
handleUpdate (event) {
//if ("1" == 1) // true
//if ("1" === 1) //false
var answers = this.state.answers;
answers[event.index] = event.value;
this.setState(() => ({
answers: answers
}));
console.log(event);
}
render () {
return (
<div id="answers">
Answer Choices<br />
{this.state.answers.map((value, index) => (
<Answer value={value} key={index} onUpdate={this.handleUpdate} number={index}/>
))}
</div>
);
}
}
class Answer extends Component {
constructor(props) {
super(props);
this.state = {
inputText: "",
answer: props.value,
correctAnswers: "",
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState((previousState, props) => ({
answer: value
}));
this.props.onUpdate({
index: this.props.number,
value
});
//
// let sample = {
// kyle: "toast",
// cam: "pine"
// };
// sample.kyle
// sample.cam
}
render () {
return (
<div>
<input type="checkbox"/>
<input type="text" value={this.state.answer} onChange={this.handleChange}/>
</div>
)
}
}
var questionIdx = 0;
class Questions extends Component {
constructor(props){
super(props);
this.state = {
questions:[]
}
this.handleUpdate = this.handleUpdate.bind(this);
}
handleUpdate (event) {
//if ("1" == 1) // true
//if ("1" === 1) //false
var questions = this.state.questions
questions[event.index] = event.value;
this.setState(() => ({
questions: questions
}));
console.log(event);
}
render () {
return (
<div id="questions">
<ol id="quesitonsList">
<li id="oneQuestion">
<Question onUpdate={this.handleUpdate} number={questionIdx}/>
</li>
</ol>
</div>
);
}
}
class Question extends Component {
constructor(props){
super(props);
this.state = {
question: ""
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState((previousState, props) => ({
question: value
}));
//if (this.prop.questions.indexOf(value) == questionIdx) {
this.props.onUpdate({
index: questionIdx,
value
});
// }
}
render () {
return (
<div id="question">
Question<br />
<input type="text" value={this.state.question} onChange={this.handleChange}/>
<PhotoDropZone />
<Answers />
</div>
);
}
}
class AddQuestionButton extends Component {
addQuestion () {
}
render () {
return (
<div id="addQuestionButton">
<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
</div>
);
}
}
So what I am having trouble figuring out is how to go about using my addQuestionButton to add
<li id="oneQuestion">
<Question onUpdate={this.handleUpdate} number={questionIdx}/>
</li>
to my questionsList <ol></ol> in my Questions class. I'm having a hard time figuring out how to approach this, I'm new to React and JS. I don't need the exact answer per say but a hint in the right direction would help. Thanks!
You could create a function in your Questions that adds a question to your questions state array and pass that down as a prop to your AddQuestionButton component.
Example
class Questions extends React.Component {
state = {
questions: ["What is this?"]
};
addQuestion = question => {
this.setState(prevState => ({
questions: [...prevState.questions, question]
}));
};
render() {
return (
<div id="questions">
<ol id="quesitonsList">
{this.state.questions.map(question => (
<li id="oneQuestion"> {question} </li>
))}
</ol>
<AddQuestionButton onClick={this.addQuestion} />
</div>
);
}
}
class AddQuestionButton extends React.Component {
addQuestion = () => {
this.props.onClick(
Math.random()
.toString(36)
.substring(7) + "?"
);
};
render() {
return (
<div id="addQuestionButton">
<button id="addQuestionButton" onClick={this.addQuestion}>
Add Question
</button>
</div>
);
}
}
ReactDOM.render(<Questions />, 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>
Perhaps it may help you:
const questionsList = [1, 2, 3, 4, 5];
const listItems = questionsList.map((item, index) =>(
<li key="{index}">
<Question onUpdate={this.handleUpdate} number={questionIdx}/>
</li>
));
ReactDOM.render(
<ol>{listItems}</ol>
);
I'm doing a project which does a get of the json-server, and render them on the screen.
But when I added a filtering function on it, it only renders after I type a name to filter. I wanted him to render everyone and make the filter.
My Body.js (Where is my function of render):
import React from 'react';
import './Body.css';
import { Link } from "react-router-dom";
class Body extends React.Component {
constructor(props) {
super(props);
this.state = {
input: "",
employeeBody: this.props.employee,
}
}
getName = () => {
const { employee, add } = this.props;
const {employeeBody} = this.state;
return employee.map(name => (
<div className='item'>
<Link className="link" to={`/user/${name.id}`}>
<div onClick={() => add(name)} key={name.id}>
<img className="img"
src={`https://picsum.photos/${name.id}`}
/>
</div>
<h1 className="name2"> {name.name} </h1>
</Link>
</div>
));
};
---
getValueInput = (evt) => {
const inputValue = evt.target.value;
this.setState({ input: inputValue });
this.filterNames(inputValue);
console.log(this.state.employeeBody)
}
filterNames (inputValue) {
const { employee } = this.props;
this.setState({
employeeBody: employee.filter(item =>
item.name.includes(inputValue))
});
}
---
render() {
return (
<div>
<div className="body">
{this.getName()}
</div>
<div className='input'>
<input type="text" onChange={this.getValueInput} />
</div>
</div>
)
}
}
export default Body;
My App.js (Where i get the state by get of axios.):
import React from 'react';
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import './App.css';
import axios from 'axios';
import Body from './Body';
import User from './User';
import Header from './Header';
class AppRouter extends React.Component {
state = {
employeeCurrent: [],
employee: []
};
componentDidMount() {
axios
.get("http://127.0.0.1:3004/employee")
.then(response => this.setState({
employee: response.data
}));
}
add = name => {
this.setState(prevState => {
const copy = prevState.employeeCurrent.slice(1);
copy.push(name);
return {
employeeCurrent: copy
};
});
};
render() {
return ( <
Router >
<
div className = "router" >
<
Header / >
<
Route exact path = "/"
render = {
props => ( <
Body { ...props
}
add = {
this.add
}
employee = {
this.state.employee
}
employeeCurrent = {
this.state.employeeCurrent
}
/>
)
}
/> <
Route path = "/user/:id"
component = {
props => ( <
User { ...props
}
employee = {
this.state.employee
}
employeeCurrent = {
this.state.employeeCurrent
}
/>
)
}
/> <
/div> <
/Router>
);
}
}
export default AppRouter;
Someone would can help me ?
You should filter in the render method.
render() {
const { employee: employees } = this.props; // rename the variable {employee} to plural {employees}, it has more sense.
const { input } = this.state;
return (
<div>
<div className="body">
{employees
.filter(employee => employee.name.includes(input))
.map(employee => {
<div className='item'>
<Link className="link" to={`/user/${employee.id}`}>
<div onClick={() => add(employee)} key={employee.id}>
<img className="img"
src={`https://picsum.photos/${employee.id}`}
/>
</div>
<h1 className="name2"> {employee.name} </h1>
</Link>
</div>
})}
</div>
<div className='input'>
<input type="text" onChange={(e) => this.setState({ input: e.target.value })} />
</div>
</div>
);
}
Remember that the method includes is case sensitive, it should be lowerCase it before to compare.
P.S.: You could also create a variable / component / function and render split all the "logic" of rendering there.