React.js not re-rendering app on state update

React.js not re-rendering app on state update - javascript

I'm working on a React.js based outliner (in similar vein to workflowy). I'm stuck at a point. When I press enter on any one item, I want to insert another item just below it.
So I have used setState function to insert an item just below the current item as shown by the code snippet below:
this.setState({
items: this.state.items.splice(this.state.items.map((item) => item._id).indexOf(itemID) + 1, 0, {_id: (new Date().getTime()), content: 'Some Note'})
})
However, the app is re-rendering as blank without any error showing up.
My full source so far:
import './App.css';
import React, { Component } from 'react';
import ContentEditable from 'react-contenteditable';
const items = [
{
_id: 0,
content: 'Item 1 something',
note: 'Some note for item 1'
},
{
_id: 5,
content: 'Item 1.1 something',
note: 'Some note for item 1.1'
},
{
_id: 1,
content: 'Item 2 something',
note: 'Some note for item 2',
subItems: [
{
_id: 2,
content: 'Sub Item 1 something',
subItems: [{
_id: 3,
content: 'Sub Sub Item 4'
}]
}
]
}
];
class App extends Component {
render() {
return (
<div className="App">
<Page items={items} />
</div>
);
}
}
class Page extends Component {
constructor(props) {
super(props);
this.state = {
items: this.props.items
};
this.insertItem = this.insertItem.bind(this);
}
render() {
return (
<div className="page">
{
this.state.items.map(item =>
<Item _id={item._id} content={item.content} note={item.note} subItems={item.subItems} insertItem={this.insertItem} />
)
}
</div>
);
}
insertItem(itemID) {
console.log(this.state.items);
this.setState({
items: this.state.items.splice(this.state.items.map((item) => item._id).indexOf(itemID) + 1, 0, {_id: (new Date().getTime()), content: 'Some Note'})
})
console.log(this.state.items);
}
}
class Item extends Component {
constructor(props) {
super(props);
this.state = {
content: this.props.content,
note: this.props.note
};
this.saveItem = this.saveItem.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
render() {
return (
<div key={this.props._id} className="item">
<ContentEditable html={this.state.content} disabled={false} onChange={this.saveItem} onKeyPress={(event) => this.handleKeyPress(this.props._id, event)} />
<div className="note">{this.state.note}</div>
{
this.props.subItems &&
this.props.subItems.map(item =>
<Item _id={item._id} content={item.content} note={item.note} subItems={item.subItems} insertItem={this.insertItem} />
)
}
</div>
);
}
saveItem(event) {
this.setState({
content: event.target.value
});
}
handleKeyPress(itemID, event) {
if (event.key === 'Enter') {
event.preventDefault();
console.log(itemID);
console.log(event.key);
this.props.insertItem(itemID);
}
}
}
export default App;
The github repo: https://github.com/Hirvesh/mneme
Can anybody help me understand as to why it's not rendering again after I update the items?
Edit:
I have update the code to add keys, as suggested below, still rendering as blank, despite the state updating:
import './App.css';
import React, { Component } from 'react';
import ContentEditable from 'react-contenteditable';
const items = [
{
_id: 0,
content: 'Item 1 something',
note: 'Some note for item 1'
},
{
_id: 5,
content: 'Item 1.1 something',
note: 'Some note for item 1.1'
},
{
_id: 1,
content: 'Item 2 something',
note: 'Some note for item 2',
subItems: [
{
_id: 2,
content: 'Sub Item 1 something',
subItems: [{
_id: 3,
content: 'Sub Sub Item 4'
}]
}
]
}
];
class App extends Component {
render() {
return (
<div className="App">
<Page items={items} />
</div>
);
}
}
class Page extends Component {
constructor(props) {
super(props);
this.state = {
items: this.props.items
};
this.insertItem = this.insertItem.bind(this);
}
render() {
return (
<div className="page">
{
this.state.items.map(item =>
<Item _id={item._id} key={item._id} content={item.content} note={item.note} subItems={item.subItems} insertItem={this.insertItem} />
)
}
</div>
);
}
insertItem(itemID) {
console.log(this.state.items);
this.setState({
items: this.state.items.splice(this.state.items.map((item) => item._id).indexOf(itemID) + 1, 0, {_id: (new Date().getTime()), content: 'Some Note'})
})
console.log(this.state.items);
}
}
class Item extends Component {
constructor(props) {
super(props);
this.state = {
content: this.props.content,
note: this.props.note
};
this.saveItem = this.saveItem.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
render() {
return (
<div className="item">
<ContentEditable html={this.state.content} disabled={false} onChange={this.saveItem} onKeyPress={(event) => this.handleKeyPress(this.props._id, event)} />
<div className="note">{this.state.note}</div>
{
this.props.subItems &&
this.props.subItems.map(item =>
<Item _id={item._id} key={item._id} content={item.content} note={item.note} subItems={item.subItems} insertItem={this.insertItem} />
)
}
</div>
);
}
saveItem(event) {
this.setState({
content: event.target.value
});
}
handleKeyPress(itemID, event) {
if (event.key === 'Enter') {
event.preventDefault();
console.log(itemID);
console.log(event.key);
this.props.insertItem(itemID);
}
}
}
export default App;
Edit 2:
As per the suggestions below, added key={i._id}, still not working, pushed latest code to github if anybody wants to take a look.
this.state.items.map((item, i) =>
<Item _id={item._id} key={i._id} content={item.content} note={item.note} subItems={item.subItems} insertItem={this.insertItem} />
)

You miss to put a key on Item, because of that React could not identify if your state change.
<div className="page">
{
this.state.items.map((item, i) =>
<Item _id={item._id}
key={i} // <---- HERE!!
content={item.content}
note={item.note}
subItems={item.subItems}
insertItem={this.insertItem} />
)}
</div>

There are multiple issues with your code:
in you are passing this.insertItem into SubItems (which does not exists)
your this.state.items.splice, changes this.state.items, but returns []. So your new State is []
try this:
this.state.items.splice(/* your splice argument here */)
this.setState({ items: this.state.items }, () => {
// this.setState is async! so this is the proper way to check it.
console.log(this.state.items);
});
To accomplish what you actually want, this will not be enough.. But at least, when you have fixed it, you can see some results.

Related

Checkbox doesn't change its value on click in React todo application

Please help me with this I don't understand exactly where I doing wrong. So when I click on the checkbox values are not changing(if it's by default true when I click on the click it should the false). For that in onChange in todoList component I am calling handleClick function there I change the todo.completed value(basically toggling the values).
In App.js inside the handleClick method When do console.log(todo) before returning from the map function value is toggling fine, but it is not updated in the updatedTodo.
App.js
import TodosData from "./todoData";
import TodoList from "./todoList";
import "./styles.css";
class App extends Component {
constructor() {
super();
this.state = {
todos: TodosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id) {
this.setState(prevState => {
const updatedTodo = prevState.todos.map(todo => {
// console.log(updatedTodo);
if(todo.id === id) {
console.log("before the opt "+todo.completed);
todo.completed = !todo.completed
console.log("after the opt "+todo.completed);
}
//console.log(todo);
return todo;
})
console.log(updatedTodo);
return {
todos: updatedTodo
}
});
}
render() {
const todoDataComponents = this.state.todos.map(item => {
return <TodoList key = {item.id} item = {item} handleChange = {this.handleChange} />
})
return (
<div className="todo-list">{todoDataComponents}</div>
);
}
}
export default App;
todoList.jsx
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
// console.log(this.props)
return (
<div className="todo-item">
<input
type="checkbox"
checked={this.props.item.completed}
onChange = {() => this.props.handleChange(this.props.item.id)}
/>
<p>{this.props.item.text}</p>
</div>
);
}
}
export default TodoList;
todoData.js
const TodosData = [
{ id: 1, text: "Coding", completed: true },
{ id: 2, text: "Exercise", completed: false },
{ id: 3, text: "Learning", completed: true },
{ id: 4, text: "Programming", completed: true },
{ id: 5, text: "inspire", completed: false },
{ id: 6, text: "motivation", completed: true }
];
export default TodosData;

I can't see any error in your handleChange() method, it should work fine. However, I've just updated some of your code which you can test below.
I changed the name of your TodoList as it's not really a list but an item. I also changed it to a functional component as it's only presentational, there is no need to have its own state. Instead of adding a p tag after the input, you should use a label to make it accessible.
I haven't really changed anything inside your handleChange() method, only removed the console.logs and it works as expected.
Update: You're using React.StrictMode, where React renders everything twice on dev. As your handleChange() runs twice, it sets the clicked todo's completed state twice, making it to set back to its original state. So if it's false on first render it sets to true on click, but it's rendered again and on the second one it's back to false. You won't notice it as it's pretty fast.
To avoid it, you need to avoid mutating anything. So I've updated your onChange handler, it returns a new object if the completed property is changed.
Feel free to run the code snippet below and click on the checkboxes or the item texts.
const TodosData = [
{ id: 1, text: 'Coding', completed: true },
{ id: 2, text: 'Exercise', completed: false },
{ id: 3, text: 'Learning', completed: true },
{ id: 4, text: 'Programming', completed: true },
{ id: 5, text: 'Inspire', completed: false },
{ id: 6, text: 'Motivation', completed: true },
];
function TodoItem(props) {
const { handleChange, item } = props;
return (
<div className="todo-item">
<input
type="checkbox"
id={`item-${item.id}`}
checked={item.completed}
onChange={() => handleChange(item.id)}
/>
<label htmlFor={`item-${item.id}`}>{item.text}</label>
</div>
);
}
class App extends React.Component {
constructor() {
super();
this.state = {
todos: TodosData,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(id) {
this.setState((prevState) => {
const updatedTodo = prevState.todos.map((todo) => {
return todo.id === id ? {
...todo,
completed: !todo.completed,
} : todo;
});
return {
todos: updatedTodo,
};
});
}
render() {
const { todos } = this.state;
return (
<div className="todo-list">
{todos.map((item) => (
<TodoItem
key={item.id}
item={item}
handleChange={this.handleChange}
/>
))}
</div>
);
}
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
body {
font-family: sans-serif;
line-height: 1.6;
}
<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>

Instead of using an additional variable, you can do it in one line. Can u see if this works for you.
handleChange(id) {
this.setState(prevState => prevState.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo )
}

is there any solution for my react state problem?

So I am a beginner in react. I was messing around with a to-do list and encountered a state related problem.
//main todolist
import React from 'react'
import './todolist.css'
import Itemtodo from './Itemtodo'
class Todolist extends React.Component{
constructor(){
super()
this.state = {
todos: [
{
id:1,
text: 'html',
completed: true
},
{
id:2,
text: 'css',
completed: true
},
{
id:3,
text: 'js',
completed: false
},
{
id:4,
text: 'react',
completed: false
},
{
id:5,
text: 'review',
completed: false
}
]
}
}
// i think it came from this method
ev = (id) =>{
this.setState((prev) =>{
const newarr = prev.todos.map((data) =>{
if(data.id === id){
data.completed = !data.completed
}
return data
})
return {
todos:newarr
}
})
}
render(){
const array = this.state.todos.map(data => <Itemtodo key={data.id} todo={data.text} ic={data.completed} ev={this.ev} id={data.id}/>)
return (
<div className="todolist">
{array}
</div>
)
}
}
export default Todolist
// item todo
import React, { Component } from 'react'
import './itemtodo.css'
export class Itemtodo extends Component {
render() {
return (
<div className ='itemtodo'>
<input type='checkbox' checked={this.props.ic} onChange={() => this.props.ev(this.props.id)}/>
<p>{this.props.todo}</p>
</div>
)
}
}
export default Itemtodo
I REALLY think that the problem was from "main todolist" because if I changed the "ev" method to do "checked every checkbox with a click" like this, it worked
// i think it came from this method
ev = (id) =>{
this.setState((prev) =>{
const newarr = prev.todos.map((data) =>{
data.completed = true
return data
})
return {
todos:newarr
}
}) //set state ends
}
I did some experiment by console loging the "newar" and it did not change. So I think it's because of the
data.completed = !data.completed
did not work please help me! Thank you

Hi Please check this example. It is working fine.
Todolist Component
import React, {Component} from 'react'
class Todolist extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: [
{id: 1, text: 'html', completed: true},
{id: 2, text: 'css', completed: true},
{id: 3, text: 'js', completed: false},
{id: 4, text: 'react', completed: false},
{id: 5, text: 'review', completed: false}
]
}
}
// i think it came from this method
ev = (id, changedValue) => {
this.setState((prev) => {
let item = prev.todos.filter((data) => data.id === id)[0];
item.completed = changedValue;
return{
todos: prev.todos
};
})
};
render() {
const array = this.state.todos.map(data => <Itemtodo key={data.id} todo={data.text} ic={data.completed}
ev={this.ev} id={data.id}/>);
return (
<div className="todolist">
{array}
</div>
)
}
}
export default Todolist
Itemtodo Component
class Itemtodo extends Component {
render() {
return (
<div className='itemtodo'>
<input type='checkbox' checked={this.props.ic} onChange={() => this.props.ev(this.props.id, !this.props.ic)}/>
{this.props.todo}
</div>
)
}
}

Here is a working example of a todo list that has TodoItem as a pure component, because toggleCompleted will not mutate this will work (you have to click on the todo to toggle completed).
//using React.memo will make TodoItem a pure
// component and won't re render if props didn't change
const TodoItem = React.memo(function TodoItem({
todo: { id, name, completed },
toggleCompleted,
}) {
const r = React.useRef(0);
r.current++;
return (
<li
onClick={toggleCompleted(id)}
style={{ cursor: 'pointer' }}
>
rendered:{r.current}, {name}, completed:
{completed.toString()}
</li>
);
});
function TodoList({ todos, toggleCompleted }) {
return (
<ul>
{todos.map((todo) => (
<TodoItem
key={todo.id}
todo={todo}
toggleCompleted={toggleCompleted}
/>
))}
</ul>
);
}
function App() {
const [todos, setTodos] = React.useState([
{ id: 1, name: '1', completed: false },
{ id: 2, name: '2', completed: false },
]);
//use callback so the handler never changes
const toggleCompleted = React.useCallback(
(id) => () =>
setTodos((todos) =>
//map todos into a new array of todos
todos.map(
(todo) =>
todo.id === id
? //shallow copy todo and toggle completed
{ ...todo, completed: !todo.completed }
: todo //just return the todo
)
),
[]
);
return (
<TodoList
todos={todos}
toggleCompleted={toggleCompleted}
/>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
And here is a broken example where I will mutate the todo, even though you changed the data you did not change the reference of the todo item so React won't re render pure TodoItem component.
//using React.memo will make TodoItem a pure
// component and won't re render if props didn't change
const TodoItem = React.memo(function TodoItem({
todo: { id, name, completed },
toggleCompleted,
}) {
const r = React.useRef(0);
r.current++;
return (
<li
onClick={toggleCompleted(id)}
style={{ cursor: 'pointer' }}
>
rendered:{r.current}, {name}, completed:
{completed.toString()}
</li>
);
});
function TodoList({ todos, toggleCompleted }) {
return (
<ul>
{todos.map((todo) => (
<TodoItem
key={todo.id}
todo={todo}
toggleCompleted={toggleCompleted}
/>
))}
</ul>
);
}
function App() {
const [todos, setTodos] = React.useState([
{ id: 1, name: '1', completed: false },
{ id: 2, name: '2', completed: false },
]);
//use callback so the handler never changes
const toggleCompleted = React.useCallback(
(id) => () =>
setTodos((todos) =>
//map todos into a new array of todos
todos.map((todo) => {
if (todo.id === id) {
todo.completed = !todo.completed;
console.log('changed todo:', todo);
}
//it is always returning the same todo that it
// got passed into, only mutates the one that
// needs to be toggled but that todo is still the
// same
return todo;
})
),
[]
);
return (
<TodoList
todos={todos}
toggleCompleted={toggleCompleted}
/>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Updating nested objects in nested arrays in React

Expected effect:
click button -> call function save -> pass object p to function update
update second object{a: 'purple', desc: 'grt', date: '12 -10-2019 '} in colors array, which is in theproducts array
Before update: {a: 'purple', desc: 'grt', date: '12 -10-2019 '}
After update: {a: 'violet', desc: 'gt', date: '12 -12-1980 '}
Error in console.log:
Uncaught TypeError: this.props.product.colors.map is not a function
App
class App extends Component {
constructor (props) {
super(props);
this.state = {
products: [
{
colors: [{a:'orange', desc: 'grtrt', date: '02-12-2019'}, {a:'purple', desc: 'grt', date: '12-10-2019'}]
desc: 'gfgfg',
},
{
colors: [{a:'black', desc: 'g', date: '12-12-2019'}, {a: 'white', {a:'black', desc: 'grtrt', date: '12-12-2119'}, }, {a:'gray', desc:'', date: '01-01-2000'}],
desc: 'gfgfgfg',
}
],
selectProductIndex: 0 //It is first object in products array
index: 1 //It is second object in colors array
}
}
update = (item) => {
const {selectProductIndex} = this.state;
this.setState(prevState => {
return {
products: [
...prevState.products.slice(0, selectProductIndex),
Object.assign({}, prevState.products[selectProductIndex], {colors: item}),
...prevState.products.slice(selectProductIndex + 1)
]
};
});
}
render () {
return (
<div>
<Items
product={this.state.products[this.state.selectProductIndex]}
update = {this.update}
/>
</div>
)
}
Items
class Items extends Component {
render () {
return (
<ul>
{
this.props.product.colors
.map((item, index) =>
<Item
key= {index}
index = {index}
time = {item}
update = {this.props.update}
/>
)
}
</ul>
</div>
);
}
}
Item
class Item extends Component {
save = () => {
const p = {
a:'violet', desc: 'gt', date: '12-12-1980'
}
this.props.update(p)
}
render() {
return (
<div>
<button onClick={this.save}>Save</button>
</div>
)
}
}

You need to pass the index of the colors item and then update it accordingly
class Item extends Component {
save = () => {
const p = {
a:'violet', desc: 'gt', date: '12-12-1980'
}
this.props.update(p, this.props.index)
}
render() {
return (
<div>
<button onClick={this.save}>Save</button>
</div>
)
}
}
and then in the topmost parent
update = (item, colorIndex) => {
const {selectProductIndex} = this.state;
this.setState(prevState => {
return {
products: [
...prevState.products.slice(0, selectProductIndex),
Object.assign({}, prevState.products[selectProductIndex], {colors: prevState.products[selectProductIndex].colors.map((it,idx) => {
if(idx === colorsIndex) { return item}
return it;
})}),
...prevState.products.slice(selectProductIndex + 1)
]
};
});
}
Working demo
const { Component } = React;
class App extends Component {
constructor (props) {
super(props);
this.state = {
products: [
{
colors: [{a:'orange', desc: 'grtrt', date: '02-12-2019'}, {a:'purple', desc: 'grt', date: '12-10-2019'}],
desc: 'gfgfg',
},
{
colors: [{a:'black', desc: 'g', date: '12-12-2019'}, {a:'black', desc: 'grtrt', date: '12-12-2119'}, {a:'gray', desc:'', date: '01-01-2000'}],
desc: 'gfgfgfg',
}
],
selectProductIndex: 0,
index: 1
}
}
update = (item, colorIndex) => {
const {selectProductIndex} = this.state;
this.setState(prevState => {
return {
products: [
...prevState.products.slice(0, selectProductIndex),
Object.assign({}, prevState.products[selectProductIndex], {colors: prevState.products[selectProductIndex].colors.map((it,idx) => {
if(idx === colorIndex) { return item}
return it;
})}),
...prevState.products.slice(selectProductIndex + 1)
]
};
});
}
render () {
return (
<div>
<Items
product={this.state.products[this.state.selectProductIndex]}
update = {this.update}
/>
</div>
)
}
}
class Items extends Component {
render () {
return (
<ul>
{
this.props.product.colors
.map((item, index) =>
<Item
key= {index}
index = {index}
time = {item}
update = {this.props.update}
/>
)
}
</ul>
);
}
}
class Item extends Component {
save = () => {
const p = {
a:'violet', desc: 'gt', date: '12-12-1980'
}
this.props.update(p, this.props.index)
}
render() {
return (
<div>
<pre>{JSON.stringify(this.props.time)}</pre>
<button onClick={this.save}>Save</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<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="app" />

How to show only some of the checkbox items from the many lists?

I am currently facing a problem while i am working on reactJs. I have a reactstrap modal (https://reactstrap.github.io/components/modals/) where i am displaying checkbox items from an array from state. I want display only some of the options like option 1, option 4 and option 6 but not all, how can i hide other options in the view. Here is my code, can anyone help me how can i solve this problem please? And is there a good way to implement this checkbox to check and uncheck in a single or check/uncheck all.Please recommend me a good way like using jquery or anythin related to plain Js.
Help is appreciated. Thank You !
CodeSandBox Code: https://codesandbox.io/s/xj9ppwrq1z
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Modal,ModalBody,ModalFooter,ModalHeader,Button,Input,Label } from
"reactstrap";
class CheckBox extends Component{
constructor(props){
super(props);
this.state = {
checkboxModal: false,
checkBoxlists: [
{id:1, name: 'Option 1', isChecked: false},
{id:2, name: 'Option 2', isChecked: false},
{id:3, name: 'Option 3', isChecked: false},
{id:4, name: 'Option 4', isChecked: false},
{id:5, name: 'Option 5', isChecked: false},
{id:6, name: 'Option 6', isChecked: false}
],
};
}
toggleCheckBoxModal = () => {
this.setState({ checkboxModal : !this.state.checkboxModal });
}
// Handles check or uncheck only to a single flag
handleSingleChange = (e) => {
let checkBoxlists = this.state.checkBoxlists;
checkBoxlists.forEach( (item) => {
if(item.name === e.target.name ){
item.isChecked = e.target.checked;
}
});
this.setState({ checkBoxlists : checkBoxlists });
}
//Handle check/uncheck of all flag
handleAllChange = (e) => {
let checkBoxlists = this.state.checkBoxlists;
checkBoxlists.forEach( (item) => {
item.isChecked = e.target.checked;
});
this.setState({ checkBoxlists: checkBoxlists });
}
handleInput = (e) => {
this.setState({ [e.target.name] : e.target.value });
}
render(){
return(
<div>
<Button onClick={this.toggleCheckBoxModal}>Click to Open</Button>
<Modal isOpen={this.state.checkboxModal}>
<ModalHeader toggle={this.checkboxModal}></ModalHeader>
<ModalBody style={{ backgroundColor: "#4e5d6c", color: "#e1ebeb" }}>
<div style={{ margin: "5px 0px 25px 25px"}}><Input type="checkbox" onClick={ this.handleAllChange } value="checkedAll" /> Check/Uncheck All</div>
{this.state.checkBoxlists.map( item => {
return(
<ul key={item.id}>
<li >
<Input
// key={item.id}
type={"checkbox"}
name={item.name}
value={item.name}
checked={item.isChecked}
onChange={this.handleSingleChange}
/>
<Label>{item.name}</Label>
</li>
</ul>
)
})}
</ModalBody>
<ModalFooter>
<Button onClick={this.toggleCheckBoxModal}>Close</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
ReactDOM.render(<CheckBox />, document.getElementById('root'));

The method of the renderCheckboxes() will return checkboxes which you want. I created example array for that. Then use renderCheckboxes() in render()
You can completely remove the handleSinlgeChange() use that in handleAllChange().Like below
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import {
Modal,
ModalBody,
ModalFooter,
ModalHeader,
Button,
Input,
Label
} from "reactstrap";
class CheckBox extends Component {
constructor(props) {
super(props);
this.state = {
allChecked:false,
checkboxModal: false,
checkBoxlists: [
{ id: 1, name: "Option 1", isChecked: false },
{ id: 2, name: "Option 2", isChecked: false },
{ id: 3, name: "Option 3", isChecked: false },
{ id: 4, name: "Option 4", isChecked: false },
{ id: 5, name: "Option 5", isChecked: false },
{ id: 6, name: "Option 6", isChecked: false }
]
};
}
toggleCheckBoxModal = () => {
this.setState({ checkboxModal: !this.state.checkboxModal });
};
// Handles check or uncheck only to a single flag
//Handle check/uncheck of all flag
handleAllChange = e => {
let checkBoxlists = this.state.checkBoxlists;
let allChecked = this.state.allChecked;
if (e.target.value === "checkedAll") {
checkBoxlists.forEach(item => {
item.isChecked = e.target.checked;
allChecked = e.target.checked
});
}
else checkBoxlists.find(item => item.name == e.target.name).isChecked = e.target.checked
this.setState({ checkBoxlists,allChecked });
}
handleInput = e => {
this.setState({ [e.target.name]: e.target.value });
};
renderCheckboxes = () => {
let wantedCheckboxes = [1, 4, 6];
return this.state.checkBoxlists.filter(cb => wantedCheckboxes.includes(cb.id))
.map(item => (
<ul key={item.id}>
<li>
<Input
// key={item.id}
type={"checkbox"}
name={item.name}
value={item.name}
checked={item.isChecked}
onChange={this.handleAllChange}
/>
<Label>{item.name}</Label>
</li>
</ul>
))
}
render() {
return (
<div>
<Button onClick={this.toggleCheckBoxModal} style={{ margin: "50px" }}>
Click to Open
</Button>
<Modal isOpen={this.state.checkboxModal}>
<ModalHeader toggle={this.checkboxModal} />
<ModalBody style={{ backgroundColor: "#4e5d6c", color: "#e1ebeb" }}>
<div style={{ margin: "5px 0px 25px 25px" }}>
<Input
type="checkbox"
onClick={this.handleAllChange}
value="checkedAll"
checked={this.state.allChecked}
/>{" "}
Check/Uncheck All
</div>
{this.renderCheckboxes()}
</ModalBody>
<ModalFooter>
<Button onClick={this.toggleCheckBoxModal}>Close</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
ReactDOM.render(<CheckBox />, document.getElementById("root"));
Hope it will help

I would create a function that returns an array of checkBoxLists containing only the items you want displayed at a time
filterOptions = () => {
checkBoxlists.forEach( (item) => {
if(item.id % 2 == 0) // example: only even options
// for 1, 4 6
if(item.id == 1)
newOptions.add(item)
elseif(item.id==4)
newOptions.add(item)
elseif(itemid==6)
newOptions.add(item)
};
return newOptions;
}
It's advice from a newbie but im just trying to help

Don't know how to handle input in my project

I'm working under the to-do list project and have got a problem with adding a comment to my list item. This is what I have right now:
App flow
After adding a list item you should be able to click in this item and a new window with comments will appear. In the comments section, comments should be added with Ctrl+Enter combination.
I've got a problem with adding comments to the list item (they should be added to the "comments" array of a particular list item).
Could you please explain what I'm doing wrong and why my comments aren't adding.
UPDATE: I've updated my code but the following mistake appears when I press Ctr+Enter to add a comment: [Error] (http://joxi.ru/Q2KR1G3U4lZJYm)
I've tried to bind the addItem method but no result. What's wrong with the addItem method?
Here is my main component:
App.js
import React, { Component } from 'react';
import './App.css';
import ListInput from './components/listInput'
import ListItem from './components/listItem'
import SideBar from './components/sideBar'
import CommentsSection from './components/commentsSection'
class App extends Component {
constructor(props){
super(props);
this.state = {
items: [
{
id: 0,
text: 'First item',
commentsCount: 0,
comments: [],
displayComment: false
},
{
id: 1,
text: 'Second item',
commentsCount: 0,
comments: [],
displayComment: false
},
{
id: 2,
text: 'Third item',
commentsCount: 0,
comments: [
'Very first comment',
'Second comment',
],
displayComment: false
},
],
nextId: 3,
activeComment: [],
}
}
// Add new item to the list
addItem = inputText => {
let itemsCopy = this.state.items.slice();
itemsCopy.push({id: this.state.nextId, text: inputText});
this.setState({
items: itemsCopy,
nextId: this.state.nextId + 1
})
}
// Remove the item from the list: check if the clicked button id is match
removeItem = id =>
this.setState({
items: this.state.items.filter((item, index) => item.id !== id)
})
setActiveComment = (id) => this.setState({ activeComment: this.state.items[id] });
addComment = (inputComment, activeCommentId ) => {
// find item with id passed and select its comments array
let commentCopy = this.state.items.find(item => item.id === activeCommentId)['comments']
commentCopy.push({comments: inputComment})
this.setState({
comments: commentCopy
})
}
render() {
return (
<div className='App'>
<SideBar />
<div className='flex-container'>
<div className='list-wrapper'>
<h1>Items</h1>
<ListInput inputText='' addItem={this.addItem}/>
<ul>
{
this.state.items.map((item) => {
return <ListItem item={item} key={item.id} id={item.id} removeItem={this.removeItem} setActiveComment={() => this.setActiveComment(item.id)}/>
})
}
</ul>
</div>
<CommentsSection inputComment='' items={this.state.activeComment}/>
</div>
</div>
);
}
}
export default App;
and my Comments Section component:
commentsSection.js
import React from 'react';
import './commentsSection.css';
import CommentInput from './commentInput'
import CommentsItem from './commentsItem'
export default class CommentsSection extends React.Component {
constructor(props){
super(props);
this.state = {value: this.props.inputComment};
this.handleChange = this.handleChange.bind(this);
this.handleEnter = this.handleEnter.bind(this);
this.addComment = this.addComment.bind(this)
}
handleChange = event => this.setState({value: event.target.value})
handleEnter(event) {
if (event.charCode === 13 && event.ctrlKey) {
this.addComment(this.state.value)
}
}
addComment(comment) {
// Ensure the todo text isn't empty
if (comment.length > 0) {
this.props.addComment(comment, this.props.activeComment);
this.setState({value: ''});
}
}
render() {
return (
<div className='component-section'>
<h1>{this.props.items.text}</h1>
<ul>
{ this.props.items.comments &&
this.props.items.comments.map((comment, index) => <p key={index}>{comment}</p>)
}
</ul>
<CommentsItem />
{/*<CommentInput />*/}
<div className='comment-input'>
<input type='text' value={this.state.value} onChange={this.handleChange} onKeyPress={this.handleEnter}/>
</div>
</div>
)
}
}

Change your CommentSection component addComment method and handleEnter method
addComment(comment) {
// Ensure the todo text isn't empty
if (comment.length > 0) {
// pass another argument to this.props.addComment
// looking at your code pass "this.props.items"
this.props.addComment(comment, this.props.items.id);
this.setState({value: ''});
}
}
handleEnter(event) {
if (event.charCode === 13 && event.ctrlKey) {
// passing component state value property as new comment
this.addComment(this.state.value)
}
}
Change your App Component addComment method
addComment = (inputComment, activeCommentId )=> {
// find item with id passed and select its comments array
let commentCopy = this.state.items.find(item => item.id === activeCommentId)['comments']
// if you want to push comments as object
// but looking at your code this is not you want
// commentCopy.push({comments: inputComment})
// if you want to push comments as string
commentCopy.push( inputComment)
this.setState({
comments: commentCopy
})
}

Develop Reference

JavaScript is the programming language of the Web.

React.js not re-rendering app on state update - javascript

Related

Checkbox doesn't change its value on click in React todo application

is there any solution for my react state problem?

Updating nested objects in nested arrays in React

How to show only some of the checkbox items from the many lists?

Don't know how to handle input in my project

Categories

Resources