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

Establishing the default scroll position in tables using React.js

Shadow border added to each div creates a unique navigation tab for easy access

using mixins with styled-components

What methods can you use to locate the CSS selector within HTML that meets certain criteria?

Checking and locating elements using Jquery's distinctive style

What are the steps to execute a Next.js app post cloning the repository?

I specialize in optimizing blog content by omitting the final line within a React framework

Trapped in the clutches of the 'Access-Control-Allow-Origin' snag in our Node.js application

Is there a way to modify the color of an externally imported SVG within a React component?

Oops! There seems to be a server error with the PDFDownloadLink API. It appears that you are trying to use this web-specific API on Node, or perhaps your bundler is not loading react-pdf properly

Modify the appearance of the element that is currently chosen

Tips for Resizing google reCAPTCHA

SetState function is not available, and the 'bind' operation has been successfully executed

Adjust the padding of the React Table Material design

A <div> with relative positioning is inhibiting the visibility of absolutely positioned elements without any visible overlap

Error: Definition Already Exists

Oops! You are required to utilize destructuring state assignment when working with React and WebSocket

Bizarre display of miscellaneous items on the monitor

Utilize Bootstrap's form-inline feature to arrange fields side by side in one neat

The no-unused-expressions rule is triggered when an assignment or function call is expected