Why the UI component of the react is not getting updated?

user_6787187 0
Viewed 58

It's more of a conceptual problem rather than a bug fix.

I am fairly new to react and was trying to build a simple todo application with add and remove function. I implemented a feature that whenever the todo list element would be clicked it would be removed. I styled it with CSS and border it.

Main issue here is, whenever i click the element of the list,it goes away, but the border remains. Just the text dissapper not the whole div.

Here is the App.js code

import React, { Component } from 'react';
import './App.css';
import Navbar from './Navbar/Navbar' 
import InputBox from './inputBox/inputBox'; 
import ListTodo from './listTodo/listTodo';

class App extends Component {

  constructor(props){
    super(props)
    console.log("This is from the constuor");
    this.state={
      todo:[

      ],
      temp:''
    }
  }

  changed=(thing)=>{
    var x =  thing.target.value;
    this.setState({
      temp:x
    })
  }

  addTodo = ()=>{
    const item = [
      ...this.state.todo
    ]
    item.push(this.state.temp);
    this.setState({
      todo:item
    })
  }

  removeIt = (index)=>{
    const item = [
      ...this.state.todo
    ]
    delete item[index]
    this.setState({
      todo:item
    })
  }

  render() {
    return (
      <div className="change">
      <Navbar/>
        <InputBox
        changed={(event)=>this.changed(event)}
        addTodo = {this.addTodo}
        />
        <ListTodo 
        todoList = {this.state.todo}
        removeIt = {this.removeIt}
        />
      </div>
    );
  }
}

export default App;

My inputBox component:

    import React from 'react';
import {Button} from 'react-bootstrap'; 
import './inputBox.css'

const inputBox = (props)=>{

 const keyPress=(e)=>{
        if(e.keyCode === 13){
           console.log('value', e.target.value);
           props.addTodo();
        }
     }
    return(
        <div className="center">
            <input className="inputDis" type="text" key='1' onChange={props.changed} onKeyDown={keyPress}/>
            <Button className="buttonDis" bsStyle="info" key='2' onClick={props.addTodo}>Info</Button>
        </div>
    )
}
export default inputBox

My todo list component:

import React from 'react';
import {Button} from 'react-bootstrap'; 
import './listTodo.css'
const displayTodo = (props)=>{

  const items = props.todoList.map((item, index)=>{
      return(
        <div key={index+"upper"} onClick={()=>props.removeIt(index)} className="listTodo">
           <span key={index+"div"}>{item}</span>
            {/* <Button onClick={()=>props.removeIt(index)} bsStyle="info" key='remove'>X</Button>  */}
           </div>
           )})

    return (
      <div>{items}</div>
      );
}


export default displayTodo

I really cant understand how to get this thing work.Here is the UI image this is while updating the list and this is happening while removing

reactjs javascript
1 Answers

Your removeIt code is the issue, you copy all elements, then delete the value at a specific index, leaving it undefined (a hole), so it get's rendered by todoList.map...

removeIt = (index)=>{
  const item = [
    ...this.state.todo
  ]
  delete item[index]
  this.setState({
    todo:item
  })
}

The common convention is to filter all the elements whose index is not equal to the one you're trying to remove

removeIt = (index)=>{
  const newItems = this.state.items.filter((el, elIndex) => elIndex !== index);
  this.setState({
    todo: newItems
  })
}


const data = [1,2,3,4,5,6];

// delete method
const data1 = [...data];
delete data1[3]; // delete index 3
console.log(data1); // [1,2,3,undefined,5,6]

// filter method
const data2 = [...data].filter((el, index) => index !==3); // filter index 3 out
console.log(data2); // [1,2,3,5,6]

user_86908570
Related