React / Checkboxにチェックをしてフォームをsubmitしたら、あるメッセージを表示させたい

前提・実現したいこと

Reactで、ToDoアプリを作成しています。

Appコンポーネント、Formコンポーネント、Listコンポーネント、Itemコンポーネントに分けているのですが、

Formコンポーネントの中にあるチェックボックスにチェックを入れてsubmitしたら、
↓
ItemコンポーネントによってrenderされたToDoのタスクに「Important」と表示させたいと思っています。

FormコンポーネントはItemコンポーネントとはつながっていないため、上記のような処理をするのであればAppコンポーネントからpropsなりをItemコンポーネントに通して、Itemコンポーネント内で条件分岐などをしてメッセージを表示させたらいいのではないかと思うのですが、うまく出来ずにいます。どなたかやり方をご教授いただけないでしょうか。

該当のソースコード

React.js
1class App extends React.Component {
2
3    constructor(props){
4        super(props)
5        this.state =  { defaultList: todo, checked: false }
6    }
7
8    onSubmit = (task) => {
9        this.state.defaultList.unshift({task});
10        this.setState(todo);
11    }
12
13    deleteTask = (i) => {
14        this.state.defaultList.splice(i, 1);
15        this.setState({defaultList: todo})
16    }
17
18    handleCheckBox = () => {
19        this.setState({ checked: !this.state.checked });
20        console.log("App.js", this.state.checked);       
21    }
22
23    render() {
24        return (
25            <div>
26                <Form 
27                    onSubmit = {this.onSubmit}
28                    checkCheckBox = {this.handleCheckBox}
29                />
30                <List 
31                    lists = {this.state.defaultList}
32                    deleteTask = {this.deleteTask}
33                    checked={this.state.checked}
34                />
35            </div>
36        );
37    }
38}

class Form extends React.Component {

    onFormSubmit = (event) => {
        event.preventDefault();

        if(this.refs.userInput.value === "") {
            this.refs.warning.innerHTML = "Please enter a task";
        } else {
            this.refs.warning.innerHTML = "";
            this.props.onSubmit(this.refs.userInput.value);
            this.refs.userInput.value = "";
        }
    }

    handleCheckClick = () => {
        this.props.checkCheckBox();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label>Task</label>
                        <input ref="userInput" />
                        <p ref="warning" className="warning"></p>
                    </div>
                    <div className="ui checkbox block">
                        <input
                            type="checkbox"                      
                            onChange={this.handleCheckClick} 
                        />
                        <label>Important</label>
                    </div>
                        <button className="ui button" type="submit">ADD</button>
                </form>
            </div>
        );
    }
}

const Item = ({task, priority, deleteItem}) => {
    return (
        <ul>
            <li><b>{task}</b></li>
            <li>{priority && <span>{priority}</span>}</li>
            <li onClick={deleteItem}>Delete</li>
        </ul>
    );
}

const List = ({deleteTask, lists, checked}) => {
    const renderedList = lists.map((list, i) => {

        return (
            <Item 
                key={i}
                task = {list.task}
                priority = {list.priority}
                deleteItem = {deleteTask}
                checkPriority = {checked}
            />
        );
    });
    return <div>{renderedList}</div>
}