Modify styling of complete list upon clicking in React

Question

Modify styling of complete list upon clicking in React

For my latest project, I developed a basic todo application using React. One of the key features is that when a user clicks on a checkbox, the corresponding todo item's CSS changes to show a strike-through effect. Additionally, a button appears on hover which allows users to delete the specific todo item.

Currently, I am looking to implement two new functionalities:

Modify the CSS of the entire list of todos upon clicking an 'x' event using React.
Adjust the CSS of individual todos when clicking on the respective list item.

Below is a snippet of my app code:

class App extends Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  ...

I have added a method called "allDone()" and attached it to the span element 'X' via onClick event. However, I am encountering issues in changing the CSS of all elements in the list to display them as strikethrough. Check out the image here.

css reactjs

Answer 1

Answer №1

To update the class or add a new one in the 'allDone' function, you can utilize the forEach() statement and ensure to bind this function.

allDone = () => {
    var todos = this.state.todos;

    todos.forEach(function(item) {
      item.Decoration = "newTodo animated fadeInLeft strike";
    });

    this.setState({ todos: todos });
};

class App extends React.Component {

  constructor(){
    super();
    this.state={
      todos:[]
    };
  };

  enterTodo(keypress){
    var newTodo=this.refs.inputTodo.value;
    
    if( keypress.charCode == 13 )
    {
      this.setState({
        todos: this.state.todos.concat({Value:newTodo, Decoration:'newTodo animated fadeInLeft', checked:false})
      });

      this.refs.inputTodo.value=null;
    }
  }

  todo(text,i){
    return (
      <li className={text.Decoration}>
        <input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
        <div key={text.id}  className="item">
          {text.Value}
          <button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
        </div>
      </li>
    );
  }

  remove(i){
    this.state.todos.splice(i,1);
    this.setState({todos:this.state.todos});
  }

  todoCompleted(i){
    var todo={...this.state.todos}
    
    if(todo[i].checked){
      this.state.todos[i].checked = false;
      this.state.todos[i].Decoration='newTodo';
      
      this.setState({
        todos: this.state.todos
      });
    } else {
      this.state.todos[i].checked = true;
      this.state.todos[i].Decoration= 'strike';

      this.setState({
        todos: this.state.todos
      });
    }
  }

  allDone = () => {
    var todos = this.state.todos;
    
    todos.forEach(function(item) {
      item.Decoration = "newTodo animated fadeInLeft strike";
    });

    this.setState({ todos: todos });
  }

  render() {
    return (
      <div>
        <h1 id='heading'>todos</h1>
        <div className="lines"></div>
        <div>
          <input type="text" ref= "inputTodo" onKeyPress={this.enterTodo.bind(this)} className="inputodo" placeholder='todos'/>
          <span onClick={this.allDone} id="all">x</span>
        </div>
        <div className="mainapp">
          <ul>
            {this.state.todos.map(this.todo.bind(this))}
          </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

.strike {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

To update the class or add a new one in the 'allDone' function, you can utilize the forEach() statement and ensure to bind this function.

allDone = () => {
    var todos = this.state.todos;

    todos.forEach(function(item) {
      item.Decoration = "newTodo animated fadeInLeft strike";
    });

    this.setState({ todos: todos });
};

class App extends React.Component {

  constructor(){
    super();
    this.state={
      todos:[]
    };
  };

  enterTodo(keypress){
    var newTodo=this.refs.inputTodo.value;
    
    if( keypress.charCode == 13 )
    {
      this.setState({
        todos: this.state.todos.concat({Value:newTodo, Decoration:'newTodo animated fadeInLeft', checked:false})
      });

      this.refs.inputTodo.value=null;
    }
  }

  todo(text,i){
    return (
      <li className={text.Decoration}>
        <input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
        <div key={text.id}  className="item">
          {text.Value}
          <button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
        </div>
      </li>
    );
  }

  remove(i){
    this.state.todos.splice(i,1);
    this.setState({todos:this.state.todos});
  }

  todoCompleted(i){
    var todo={...this.state.todos}
    
    if(todo[i].checked){
      this.state.todos[i].checked = false;
      this.state.todos[i].Decoration='newTodo';
      
      this.setState({
        todos: this.state.todos
      });
    } else {
      this.state.todos[i].checked = true;
      this.state.todos[i].Decoration= 'strike';

      this.setState({
        todos: this.state.todos
      });
    }
  }

  allDone = () => {
    var todos = this.state.todos;
    
    todos.forEach(function(item) {
      item.Decoration = "newTodo animated fadeInLeft strike";
    });

    this.setState({ todos: todos });
  }

  render() {
    return (
      <div>
        <h1 id='heading'>todos</h1>
        <div className="lines"></div>
        <div>
          <input type="text" ref= "inputTodo" onKeyPress={this.enterTodo.bind(this)} className="inputodo" placeholder='todos'/>
          <span onClick={this.allDone} id="all">x</span>
        </div>
        <div className="mainapp">
          <ul>
            {this.state.todos.map(this.todo.bind(this))}
          </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

.strike {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

Answer №2

Here's a solution that might help:

JavaScript

completeAllTasks() {
    let updatedTasks = this.state.tasks.map((task) => { return { Status: 'completed' } })
    this.setState({ tasks: updatedTasks }); 
}

Answer 4

Here's a solution that might help:

JavaScript

completeAllTasks() {
    let updatedTasks = this.state.tasks.map((task) => { return { Status: 'completed' } })
    this.setState({ tasks: updatedTasks }); 
}

Modify styling of complete list upon clicking in React

Answer №1

Answer №2

Similar questions

Achieving proper HTML element order?

Positioning two buttons side by side in separate columns on the same horizontal alignment

What is the title of this particular CSS method?

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Most effective method for designing a reusable <table> appearance

Validating JSON form schemas in React

Is there a way to keep this table fixed in place as the user scrolls?

How to Retrieve the Default Value in a React Hook?

When using jqueryprint.js to print from Firefox browser, an additional blank page appears before the content

The full extent of the background color is not reaching 100% of the height

Concealing HTML content with a modal overlay

Switch between different react components

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

How can I adjust the positioning of labels in Semantic UI React?

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

Obtain and utilize the background color to easily implement the same color in another window

What is the best method to retrieve radio button labels from an array in React Native?

Beginner in html, css, and javascript: "Tips for saving jsfiddle demos?"

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

The React Material-UI Tab component threw an error message saying "Looking for an element type capable of holding a reference."