Javascript 如何在react应用程序中设置任务的条件？

我想在复选框表单中添加一个重要条件。当用户添加一些任务并选中小复选框（表示重要任务！）时，应在应用程序中以粗体显示。请问如何界定这些条件

function Form(props){
    const [name, setName ] = useState('');
    const [important, setImportant] = useState(false);
    
    function handleChangeImportant(e){
        console.log(e);
        e.preventDefault();
        setImportant(e.target.checked);
        if(important ){
            alert('this task is important');
            setName("");
        }
    };
    
    function handleChange(e) {
        setName(e.target.value);
    }

    function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        if(name == ''){
            alert('Please enter a valid task name');
        }
        
        if(name !== ''){
            props.addTask(name);
            setName("");
        }
    }    
    return(
        <form onSubmit={handleSubmit}> 
            <h2 className="label-wrapper">
                <label htmlFor="new-todo-input" className="label__lg">
                    What needs to be done?
                </label>
            </h2>
            
            <input 
                type="text"
                id="new-todo-input"
                className="input input__lg"
                name="text"
                autoComplete="off"
                value={name}
                onChange={handleChange}                
            />
            
            <input
                type="checkbox"
                id="todo-0" 
                value={important}
                onChange={handleChangeImportant}                             
            /> Important
            
            <button type = "submit" className="btn btn__primary btn__lg">
                Add
            </button>
        </form>
    );
}

export default Form;

功能表（道具）{
const[name，setName]=useState（“”）；
const[important，setImportant]=useState（false）；
功能手柄更改重要（e）{
控制台日志（e）；
e、 预防默认值（）；
setImportant（例如，target.checked）；
如果（重要）{
警报（“此任务很重要”）；
集合名（“”）；
}
};
功能手柄更改（e）{
设置名称（如目标值）；
}
函数handleSubmit（e）{
e、 预防默认值（）；
//警报（“Moin”）；
如果（名称=“”）{
警报（'请输入有效的任务名称'）；
}
如果（名称！=''）{
props.addTask（名称）；
集合名（“”）；
}
}    
返回(
需要做什么？
重要的
添加
);
}
导出默认表单；

我按如下方式呈现任务列表

在应用程序中，任务列表呈现如下

const taskList = tasks.filter(FILTER_MAP[filter]).map(task => (
    <ToDo 
      id ={task.id} 
      name={task.name} 
      completed={task.completed}
      key ={task.id}
      toggleTaskCompleted={toggleTaskCompleted}
      deleteTask={deleteTask}
      editTask={editTask}
      />
      )
  );

const taskList=tasks.filter（过滤器映射[filter]）.MAP（任务=>(
)
);

在您的

Todo

组件中添加另一个道具作为

重要

，根据该道具将任务标题的样式/类别设置为粗体

<ToDo 
      ...
      important={task.important}
      ...
      />

然后在显示任务名称的组件中：

<p style={{ fontWeight: props.important ? 'bold' : 'normal' }}>{props.name}</p>

{props.name}

你如何呈现任务列表？@AadilMehraj，我更新了问题，并展示了我如何呈现任务列表。

如何，如果是真的，则显示粗体？@Watanabe.N，谢谢你的帮助。我可以请你详细说明一下密码吗？