I am working on a to do list using React and Typescript. I am trying to return a different colored div when selecting a priority in the option select dropdown (prioritySelect). I have tucked in a function within the ToDoItem JSX Element. What I want to happen is for the prioritySelect component to change the background color of the div it is in “to-do-item” to signify importance.
I tried to add handleOptionsChange function and call it within the div return at the bottom but I keep running into errors when trying to add handleOptionsChange, I am not sure why.
//TODOITEM TO RETURN TO DO COMPONENT
`function ToDoItem(props: { toDo: ToDo; onDeleteToDo: any; prioritySelect: any;}) {`
///TRYING TO CREATE FUNCTION EXPRESSION THAT CALLS EVENT SET STATE FOR PRIORITY BELOW
`handleOptionsChange:any; setState:any;}) {
handleOptionsChange = (event: any) => {
props.setState({
option: event.target.value
});
}`
`return (
<div className="to-do-item" id="to-do-item">
<div className="checkbox-title-container">
<div className="check-title-div">
{Checkbox()}
<h2 className="to-do-title">{props.toDo.title}</h2>
</div>
<div id="delete-div">`
//PRIORITY OPTION SELECT BELOW
`<select name="Priority" className="select-field" value={props.prioritySelect.option} onChange={props.handleOptionsChange}>
<option className="important" value='1'>Important</option>
<option selected value='2'>Normal</option>
</select>
<button id="delete" onClick={props.onDeleteToDo}>
Delete
</button>
</div>
</div>
<div className="description-box">
<span className="description">{props.toDo.description}</span>
</div>
<br />
<span className="to-do-date">
{/* {props.toDo.duedate.toLocaleDateString()} */}
</span>
</div>
);
}`
I am trying to call handleOptionsChange when returning a JSX component below, I have taken out the rest of the components within the to-do-item div for the sake of readability
`<div className="to-do-item" id="to-do-item">
{prioritySelect={handleOptionsChange}} </div>
<div>`