Problem getting reactjs to render textDecoration: 'none'

Question

I am new to reactjs and I'm looking for help with creating a line-through feature (textDecoration) for completed items in an array,in reactjs. All items get displayed as completed and show line-through despite that they're not all completed. I've tried looking at many different tutorials but still can't get textDecortion: 'none' to display for items not completed. I want completed items to have a line-through, marking them as completed, and uncompleted items to have no line-through. However, I am getting is a line-through all items regardless whether they're completed or not. Would appreciate help understanding where I've gone wrong. Thank you.

App.js:-

    import React, { Component } from 'react';
    import './App.css';
    import Todos from './components/Todos';

    class App extends Component {
        state = {
          todos: [

            {
              id: 1,
              title: "put out the trash",
              completed: "true"
            },

            {
              id: 2,
              title: "dinner with wife",
              completed: "true"
            },

            {
              id: 3,
              title: "meeting with boss",
              completed: "false"
            }
          ]
        };

    render() {

      return (
        <div className="App">
         
          <Todos todos = {this.state.todos}/>
        </div>
      );
    }
    }
    export default App;

TodoItem.js:-

import React, { Component } from 'react'; import PropTypes from 'prop-types';

export class TodoItem extends Component {

    getStyle = () => {
      return {
        background: "#f4f4f4",
        padding: "10px",
        borderBottom: "1px #ccc dotted",
        textDecoration: this.props.todo.completed ? "line-through" : "none",
      };
    };
render() {

    return (
       
        <div style={this.getStyle()}>
        
            <p>{ this.props.todo.title }</p>
        </div>
    )
} }

TodoItem.propTypes = { todo: PropTypes.object.isRequired }

export default TodoItem

Answer 1

You did a small mistake by setting completed as a string not as a boolean

 todos: [{
      id: 1,
      title: "put out the trash",
      completed: "true" // this is string not boolean
 },
.....

So when we do the comparison this.props.todo.completed ? "line-through" : "none" it will always give the true

change it to boolean as below and it will work

 todos: [{
      id: 1,
      title: "put out the trash",
      completed: true
 },
.....