反应复选框值未正确显示

Question

I'm trying to create a simple todo list app. The problem is that when I render the checkbox this does not check itself depending on the value but set itself to checked always. I have tried to change the value to "defaultChecked" instead of "checked" but this does not seem to work. Also I have tried to test the app in Edge,Chrome,Mozila... And all of them show up the same error. Here's the code of App.jsx :

import React from "react"

const wishes = [
{name: "Travel to the moon",
done:"false"},

{name:"Pay the gym",
done:"true"},

{name:"Go to the gym",
done:"false"}
]

const App = () => <div>
<h1>My wishlist</h1>
<fieldset>
    <legend>New Wish</legend>
    <input placeholder="Enter wish here"></input>
</fieldset>
<ul>
    {wishes.map(({name,done})=>(
        <li>
            <label>{name}:{done}</label>
            <input type="checkbox" defaultChecked={done}/>
        </li>
    ))}
</ul>
<button type="button">Archive done</button>
</div>

export default App;

Thank you very much!

Answer 1

const wishes = [
{name: "Travel to the moon",
done:"false"},

{name:"Pay the gym",
done:"true"},

{name:"Go to the gym",
done:"false"}
]

done is a string which would be converted to true when used as the defaultChecked value of the checkbox. You need to use a boolean done: true or done: false