React/state受け渡し

import React from "react";
import Article from "./Article"

class Blog extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isPublished: false
        }
    }

    togglePublished = () => {
        this.setState({
            isPublished: !this.state.isPublished
        })
    }

    render(){
        return (
            div>
                Article
                    title={"1st"}
                    isPublished={this.state.isPublished}
                    toggle={()=>this.togglePublished()}
                />
                Article title={"2nd"} />
                Article title={"3rd"} />
            /div>
        )
    }
}
export default Blog
	

	import React from "react";
import './App.css';

const Article = (props) => {
    return (
        div className="cont">
            h2>{props.title}/h2>
            input
                id="check"
                type="checkbox"
                checked={props.isPublished}
                onClick={()=>props.toggle()}
            />
            label htmlFor="check">公開状態/label>
        
    )
}

export default Article