checkboxWalidator

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
// import * as serviceWorker from './serviceWorker';


const DisplayMessage = (inSubmit,isCheckedRodo,isCheckedMail) => {
    if(inSubmit){
        if(isCheckedRodo && isCheckedMail){
            return (<p>Wyslane</p>)
        } else {
            return (<p>Nie wyslane</p>)
        }
    } else { return null }
}

const InputBoxMust = (props) => {
  return (
    <div>
        *<input type="checkbox" id={props.id} onChange={props.onChange} checked={props.checked}/>
        <label htmlFor={props.id}>{props.title}</label>
    </div>
  )
}

const InputBox = (props) => {
    return (
        <div>
            <input type="checkbox" id={props.id}/>
            <label htmlFor={props.id}>{props.title}</label>
        </div>
    )
}

const RodoForm = (props) => {

    return (
        <form onSubmit={props.submit}>
            <InputBoxMust
                id="rodo"
                title="Zgoda na publikacje danych"
                onChange={props.changeRodo}
                checked={props.checkedRodo}
            />
            <InputBoxMust
                id="email"
                title="Zgoda na dostawanie mail"
                onChange={props.changeMail}
                checked={props.checkedMail}
            />
            <InputBox
                id='newsletter'
                title='Zgoda na newsletter'
            />
            <InputBox
                id='discount'
                title='Zgoda na dostawanie rabatow'
            />
            <div>
                <button type="submit">Wyslij</button>
            </div>
        </form>
    )
}

class RodoCheckbox extends React.Component{

    state = {
        isCheckedRodo:false,
        isCheckedMail:false,
        inSubmit:false
    }

    handleCheckCheckboxRodo = () => {
        this.setState({
            isCheckedRodo:!this.state.isCheckedRodo,
            inSubmit:false
        })
    }

    handleCheckCheckboxMail = () => {
        this.setState({
            isCheckedMail:!this.state.isCheckedMail,
            inSubmit:false
        })
    }

    handleFormSubmitted = (e) => {
        e.preventDefault();
        this.setState({
            inSubmit:!this.state.inSubmit
        })
    }

    render(){
        const { inSubmit, isCheckedMail, isCheckedRodo } = this.state
        return (
            <>
            <RodoForm
                submit={this.handleFormSubmitted}
                changeMail={this.handleCheckCheckboxMail}
                changeRodo={this.handleCheckCheckboxRodo}
                checkedRodo={isCheckedRodo}
                checkedMail={isCheckedMail}
            />
            {DisplayMessage(inSubmit,isCheckedRodo,isCheckedMail)}
            </>
        )
    }
}

ReactDOM.render(<RodoCheckbox/>,document.getElementById('root'));