We Keep Coding

Deleting Elements in array by index using Immer in React

I'm building this component using React where I can Add Delete and edit lessons and sections using immer library. However, when I add a new section I cant seem to delete a specific Lesson in the section, it deletes the last lesson created.
And Deleting a specific section is not working as well. Can anyone give me a hint to this problem?
These are the two deletion function that are giving me a hard time:
remove = (sectionIndex, lessonIndex) => {
const nextState = produce(this.state, (draftState) => {
draftState.list[sectionIndex].lessons.splice(lessonIndex, 1);
});
this.setState(nextState);
this.id++;
};
deletesection(sectionIndex, i) {
const nextState = produce(this.state, (draftState) => {
draftState.list[sectionIndex].section.splice(i, 1);
});
this.setState(nextState);
this.id++;
}
Here is the a link to the sandbox reproduction code: https://codesandbox.io/s/serene-forest-hpv7r?file=/src/TestClonereact.jsx

remove actually seemed to be working for me, but I spotted some errors with deletesection:
The function takes two arguments (both of which seem to be the section index), but you only call it with one.
It's not an arrow function, so it will have its own this and won't be able to access this.state.
You are accessing a property .section which does not seem to exist.
Instead of splice you would want to remove the whole section object from the draftState.list array.
deletesection = (sectionIndex) => {
const nextState = produce(this.state, (draftState) => {
delete draftState.list[sectionIndex];
});
this.setState(nextState);
}
My personal preference would be use curried functions rather than passing the sectionIndex all the way down to the Lesson component. Also you can use produce inside a setState callback rather than accessing this.state directly. But those are just suggestions. Here's my tweaked version:
import React from "react";
import "./styles.css";
import EdiText from "react-editext";
import produce from "immer";
import { v4 as uuid } from "uuid";
const Lesson = ({ lesson, onSave, remove }) => {
const { id } = lesson;
return (
<div key={id} id={`sectionlesson-${id}`}>
<div className="section-titles">
<i className="material-icons" id="iconsectionlist" type="button">
list
</i>
<EdiText
type="text"
value="Lesson Title"
onSave={onSave}
key={id}
id={`lesson-${id}`}
/>
<i className="material-icons" id="iconsectiondel" type="button">
text_fields
</i>
<i className="material-icons" id="iconsectiondel" type="button">
smart_display
</i>
<i
className="material-icons"
id="iconsectiondel"
onClick={remove}
type="button"
>
delete
</i>
</div>
<div className="testh"></div>
</div>
);
};
const Section = ({ section, onSave, remove, addlesson, deletesection }) => {
const { id } = section;
return (
<div key={id} id={`sds-${id}`}>
<div className="course-structure-form" key={id} id={`csf1-${id}`}>
<div className="section-heading">
<i className="material-icons" id="iconsection">
api
</i>
<EdiText type="text" value="Section Title" onSave={onSave} />
</div>
{section.lessons.map((lesson, lessonIndex) => (
<Lesson
key={lesson.id}
lesson={lesson}
remove={remove(lessonIndex)}
onSave={onSave}
/>
))}
<div className="addnewlesson" onClick={addlesson}>
<i
className="material-icons"
id="iconsectionde"
role="button"
type="button"
>
add_circle
</i>
<span>Add New Lesson</span>
</div>
<button onClick={deletesection}>Delete Section</button>
</div>
</div>
);
};
class TestClonereact extends React.Component {
constructor(props) {
super(props);
this.state = {
list: []
};
}
onSave = (val) => {
console.log("Edited Value -> ", val);
};
lesson({ id }) {}
addsection = () => {
this.setState(
produce((draftState) => {
draftState.list.push({ id: uuid(), lessons: [] });
})
);
};
addlesson = (sectionIndex) => () => {
this.setState(
produce((draftState) => {
// needs to have a unique id
draftState.list[sectionIndex].lessons.push({ id: uuid() });
})
);
};
remove = (sectionIndex) => (lessonIndex) => () => {
this.setState(
produce((draftState) => {
draftState.list[sectionIndex].lessons.splice(lessonIndex, 1);
})
);
};
deletesection = (sectionIndex) => () => {
this.setState(
produce((draftState) => {
delete draftState.list[sectionIndex];
})
);
};
render() {
return (
<div>
{this.state.list.map((section, i) => (
<Section
key={section.id}
section={section}
remove={this.remove(i)}
addlesson={this.addlesson(i)}
onSave={this.onSave}
deletesection={this.deletesection(i)}
/>
))}
<div className="add-section-button-structure">
<button className="tablink" onClick={this.addsection}>
Add New Section
</button>
<button className="tablink">Clear</button>
<button className="tablink">Preview</button>
<button className="tablink">Submit</button>
</div>
</div>
);
}
}
export default TestClonereact;
Code Sandbox Link

How can i add and remove elements from array on click in reactjs?

I'm trying to create a function that renders an array of links and i want to create a text input and a button that adds value from input in the array. I got the links saved in the state in the object that looks like this:
sourceLinks: {
0: "https://www.w3schools.com/html/"
1: "https://www.apachefriends.org/docs/"
2: "https://docs.moodle.org/38/en/Windows_installation_using_XAMPP"
}
I've managed to render the links like this:
renderLinks() {
let sessionLinks = this.state.sessionLinks;
let links = [];
Object.values(sessionLinks).map((link) => {
links.push(<div className="column">
<span>
<InputPreview inputValue={link} classes="w-300" />
</span>
</div>)
})
return links;
}
InputPreview is the component i use for displaying links. I'm tryin to add a text input and a button bellow the rendered links that adds the value to the array, and an icon next to every link that removes it from an array. I'm trying to do it all in one function renderLinks() and then call it in render. I know i have to push and slice items from an array and update the state but i'm strugling cause i just started learning react. Please help :)

You can add and render links with below code.
import React from "react";
class ItemList extends React.Component {
state = {
links: ["item1"],
newItem: ""
};
submit(e, newLink) {
e.preventDefault();
let updatedLinks = this.state.links;
updatedLinks.push(newLink);
this.setState({ links: updatedLinks });
}
render() {
return (
<React.Fragment>
<ul>
{this.state.links?.map((link, i) => (
<li key={i}>
<p>{link}</p>
</li>
))}
</ul>
<form onSubmit={(e) => this.submit(e, this.state.newItem)}>
<input
type="text"
value={this.state.newItem}
onChange={(e) => this.setState({ newItem: e.target.value })}
/>
<button type="submit">ADD</button>
</form>
</React.Fragment>
);
}
}
export default ItemList;
Let me know for further clarificaton.

This is a example with functional components and hooks
import React, { useState } from 'react';
const sourceLinks = [
'https://www.w3schools.com/html/',
'https://www.apachefriends.org/docs/',
'https://docs.moodle.org/38/en/Windows_installation_using_XAMPP',
];
export const ListLinks = () => {
const [links, setLinks] = useState(sourceLinks);
const [newLink, setNewLink] = useState('');
const handleAdd = () => {
setLinks(links => [...links, newLink]);
};
const handleChangeNewLink = e => {
const { value } = e.target;
setNewLink(value);
};
return (
<div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<input type='text' value={newLink} onChange={handleChangeNewLink} />
<button onClick={handleAdd}>Add</button>
</div>
<br />
{links.map((link, index) => (
<p key={index}>{link}</p>
))}
</div>
);
};
This is the result:
Lastly, read the documentation, managing the state is essential.

React js conditionally rendering a class to a specific mapped item

I have been attempting to toggle a class on click so that when I click on one of the mapped items in my Tasks component, I add the 'complete' class and put a line through that item (crossing items off of a todo list). However with my current code set up, when I click on one element to add the class, all the other elements get crossed out as well and vice versa.
Here is my current setup. The class 'complete' is what will add a line through one of the mapped items in the Tasks component.
import { Container, Row} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import axios from 'axios';
const List = (props) =>{
return(
<div>
<Link style={{textDecoration:'none'}} to={`/lists/${props.listId}`} > <p className="list-item">{props.item}</p></Link>
</div>
)
}
const Tasks = (props) =>{
return(
<div onClick={props.onClick} className={props.className} >
<div className='task-item' >
<p >{props.item}</p>
</div>
</div>
)
}
export default class Display extends Component {
constructor(props){
super(props)
this.onCompletedTask = this.onCompletedTask.bind(this);
this.state = {
list: [],
tasks:[],
complete:false
}
}
componentWillUpdate(nextProps){
axios.get(`http://localhost:8080/lists/${this.props.match.params.listId}`)
.then(response =>{
this.setState({
tasks:response.data
})
})
}
componentDidMount(){
axios.get('http://localhost:8080/lists')
.then(response=>{
this.setState({
list:response.data
})
})
.catch(error =>{
console.log(error)
});
}
onCompletedTask(item){
this.setState({ complete: !this.state.complete});
}
listCollection(){
return(
this.state.list.map(item=>{
return(<List item = {item.title} listId={item._id} key = {item._id} />)
})
)
}
taskCollection(){
return(
this.state.tasks.map((item, index) =>{
return(<Tasks onClick = {()=>this.onCompletedTask(item)} className={this.state.complete ? 'complete': ''} item={item.task} key={index}/>)
})
)
}
render() {
return (
<div id='main' >
<Container>
<Row>
<div className="sidebar">
<h1 style={{fontSize:"25pt"}}>Lists</h1>
<div className="list-menu">
{this.listCollection()}
</div>
<form action='/new-list' method='GET'>
<div style={{textAlign:'center'}}>
<button className='list-button' style={{fontSize:'12pt', borderRadius:'5px'}}>
+ New List
</button>
</div>
</form>
</div>
<div className='tasks'>
<h1 style={{fontSize:'25pt'}}>Tasks</h1>
{this.taskCollection()}
<form action={`/lists/${this.props.match.params.listId}/new-task`} method='GET'>
<button className='task-button'>
+
</button>
</form>
</div>
</Row>
</Container>
</div>
)
}
}

Your state holds only a single completed value, which OFC toggle all tasks. You could instead store a map of completed tasks.
this.state = {
list: [],
tasks: [],
complete: {}, // <--- use empty object as simple map object
}
Update onCompletedTask to store some uniquely identifying property of a task, like an id field
onCompletedTask(item){
this.setState(prevState => ({
completed: {
...prevState.completed, // <--- spread existing completed state
[item.id]: !prevState.completed[item.id] // <--- toggle value
},
}));
}
Update. taskCollection to check the completed map by id
taskCollection = () => {
const { completed, tasks } = this.state;
return tasks.map((item, index) => (
<Tasks
onClick={() => this.onCompletedTask(item)}
className={completed[item.id] ? "complete" : ""} // <--- check completed[item.id]
item={item.task}
key={index}
/>
))
};

how to add new input field after click plus icon in React Js

I'd like to add a new input everytime the plus icon is clicked but instead it always adds it to the end. I want it to be added next to the item that was clicked.
Here is the React code that I've used.
const Input = props => (
<div className="answer-choice">
<input type="text" className="form-control" name={props.index} />
<div className="answer-choice-action">
<i onClick={props.addInput}>add</i>
<i>Remove</i>
</div>
</div>
);
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
choices: [Input]
};
}
addInput = index => {
this.setState(prevState => ({
choices: update(prevState.choices, { $splice: [[index, 0, Input]] })
}));
};
render() {
return (
<div>
{this.state.choices.map((Element, index) => {
return (
<Element
key={index}
addInput={() => {
this.addInput(index);
}}
index={index}
/>
);
})}
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"));
<div id="app"></div>
<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>

I must admit this get me stuck for a while but there was a problem with how react deals with key props. When you use an index as a key it doesn't work. But if you make sure inputs will always be assigned the same key even when the list changes it will work as expected:
const Input = props => (
<div className="answer-choice">
<input type="text" className="form-control" name={props.index} />
<div className="answer-choice-action">
<i onClick={props.addInput}>add </i>
<i>Remove</i>
</div>
</div>
);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
choices: [],
nrOfElements: 0
};
}
addInput = index => {
this.setState(prevState => {
const choicesCopy = [...prevState.choices];
choicesCopy.splice(index, 0, `input_${prevState.nrOfElements}`);
return {
choices: choicesCopy,
nrOfElements: prevState.nrOfElements + 1
};
});
};
componentDidMount() {
this.addInput(0);
}
render() {
return (
<div>
{this.state.choices.map((name, index) => {
return (
<Input
key={name}
addInput={() => {
this.addInput(index);
}}
index={index}
/>
);
})}
</div>
);
}
}
Some reference from the docs:
Keys should be given to the elements inside the array to give the
elements a stable identity...
...We don’t recommend using indexes for keys if the order of items may
change. This can negatively impact performance and may cause issues
with component state.

React Todo Checkbox Styles all listed items at once

I'm trying to create a todo-list with React. I am able to display the list in the display area and also able to remove the items. But when I click on one checkbox, all the checkboxes are selected and the class is applied to all the list items. I'm not sure what is it that I am doing wrong.
I tried to use the same logic as I did with the deleted item(that's using the filter), but it doesn't work. I looked other cases here but they are mostly about how to do it with jQuery.
Here is the working example of my problem.
This is the List class
class List extends Component {
state={
check: false,
strike: 'none'
}
onCheck(item){
this.setState({check: !this.state.check})
if (this.state.strike === 'none'){
this.setState({strike: 'line-through'})
} else {
this.setState({strike: 'none'})
}
}
render() {
const strike = {
textDecoration: this.state.strike,
}
return (
<ul className='list-style'>
{ this.props.items.map((item, index) =>
<li key={index}>
<div className="outer-div">
<div className="item-checkbox">
<input type="checkbox" checked={this.state.check}
onChange={() => this.onCheck(item)} />
</div>
<div className="item-text">
<span style= {strike}> {item} </span>
</div>
<div className="item-remove-div">
<button className="item-remove" onClick={() => this.props.onDeleteList(index)}>
Remove
</button>
</div>
</div>
<br />
</li>
)}
</ul>
)}
}
export default List;
And this is the Main Class:
class Main extends Component {
state = {
items: [],
term : "",
}
onChange(event){
this.setState({ term: event });
}
onDelete= (item) =>{
// this.setState ({
// items: this.state.items.filter((i) => i.index !== item.index)
// })
this.state.items.splice(item, 1);
this.setState({items: this.state.items});
}
onSubmit= (event) => {
event.preventDefault();
if (this.state.term.length > 0){
this.setState({
term: '',
items: [...this.state.items, this.state.term]
});
}
}
render() {
return (
<div className="center">
<h1 className="header" > TODO-LIST </h1>
<div className='mainCenter'>
<form className="App" onSubmit={this.onSubmit}>
<input placeholder="add task" value={this.state.term} onChange={(e) => this.onChange(e.target.value)}
className="inputField"/>
<button>Add to the List</button>
</form>
<List items={this.state.items} onDeleteList={this.onDelete}/>
<div className="footer-outer">
<span className="footer"> Number of completed items in an array: {this.state.items.length} </span>
</div>
</div>
</div>
);
}
}

I edited your SlackBlitz. Now you can properly add new todos, check individuals tasks (toggle checked on todo click) and see correct checked counter in the footer.
Check todo-list-react demo.
import React, { Component } from 'react';
import TodoList from './List';
import './style.css';
class Main extends Component {
constructor() {
super();
this.state = {
items: [],
term: ''
};
}
handleChange = event => {
this.setState({ term: event.target.value });
}
handleItemClick = ({ value, checked }) => {
this.setState({
items: this.state.items.map(item => item.value === value ? { value, checked: !checked } : item)
});
}
onSubmit = event => {
event.preventDefault();
if (this.state.term.length > 0) {
this.setState({
term: '',
items: [...this.state.items, { value: this.state.term, checked: false }]
});
}
}
handleDelete = index => {
console.info('todo: remove todo at index', index);
// deletion logic... keep in mind that using index as key properties on jsx could breaks the correct functioning of this component.
}
render() {
return (
<div className="center">
<h1 className="header" > TODO-LIST </h1>
<div className='mainCenter'>
<form className="App" onSubmit={this.onSubmit}>
<input placeholder="add task" value={this.state.term} onChange={this.handleChange}
className="inputField"/>
<button>Add to the List</button>
</form>
<TodoList
onTodoClick={this.handleItemClick}
onDelete={this.handleDelete}
todos={this.state.items}
/>
<div className="footer-outer">
<span className="footer">
Number of completed items in an array:
{this.state.items.filter(item => item.checked).length}
</span>
</div>
</div>
</div>
);
}
}
export default Main
import React, { Component } from 'react';
import './style.css';
class List extends Component {
render() {
const { todos, onTodoClick, onDelete } = this.props;
return (
<ul className='list-style'>
{
todos.map((item, index) =>
<li key={index}>
<div className="outer-div">
<div className="item-checkbox">
<input type="checkbox" checked={item.checked}
onChange={() => onTodoClick(item)} />
</div>
<div className="item-text">
<span style={checkboxStyle(item.checked)}>{item.value}</span>
</div>
<div className="item-remove-div">
<button className="item-remove"
onClick={() => onDelete(index)}>
Remove
</button>
</div>
</div>
<br />
</li>
)}
</ul>
)}
}
function checkboxStyle(checked) {
return {
textDecoration: checked? 'line-through' : 'none',
};
}
export default List;
In addition to this answer, I recommend you to consider to add an unique key property to each jsx-element differen from the array index. Current implementation has no problem, but once you start deleting todo items probably display wrong data.
Read List and Keys from React docs and this article on Medium which covers possible error when using indixes as keys.

The reason that all your list items are being 'striked' is because you have only one state reserved for all the items in the list. You need to have the checked or strike state for each item in the list. However, as I view your comments, I realize that you already know that.
You have several other inconsistencies in the code:
onDelete= (item) =>{
this.state.items.splice(item, 1);
this.setState({items: this.state.items});
}
Making direct changes to the state like that might cause unwanted errors and unusual behavior. A better way to do it is to:
onDelete = (item) => {
const items = this.state.items.slice();
items.splice(item, 1);
this.setState({
items: items,
});
}
For more info refer to this article:
https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c