How can I create a checkbox which renders both tick and cross symbol on consecutive clicks?

Question

Need to create a checkbox component in React which puts tick mark on first check, turns it to cross mark on next click and then to blank on next consecutive click. How can I do that ? Below is my checkbox component:-

function getStyles(info) {
    var style = {};
    style.position = 'absolute';
    style.width = '16px';
    style.height = '16px';
    style.margin = '4px 0 0';
    style.background = '#EEE';
    style.display = info.display;
    return style;
}

const CheckboxValue = ({value, style}) => (
    <input type="checkbox" style={style} value={value} />
);

export default (props) => {
    return (
        <CheckboxValue style={getStyles(props)} />
    );
}

Could you share what you've tried so far and what you'd like help with or want to know more about? Stack Overflow is a helpful community but it isn't a place to have code written for you. — stealththeninja, Oct 30 '17 at 06:15
That's a start but it's not what @stealththeninja meant. Good, we see your component, now what have you tried to do to this component to achieve your goal? Do you have any ideas? What's a good first step if you were going to try and do this yourself? — caesay, Oct 30 '17 at 06:24
For the moment, I am just seeking idea whether a checkbox can take a cross symbol along with tick and blank on consecutive clicks. If it seems not possible, then I have to think about converting this component to a div. So please do suggest what to do. — Arun Kannath, Oct 30 '17 at 06:41
Just use google friend.. https://css-tricks.com/indeterminate-checkboxes/ or https://stackoverflow.com/questions/1726096/tri-state-check-box-in-html there's multitudes of questions about this — caesay, Oct 30 '17 at 23:34

How can I create a checkbox which renders both tick and cross symbol on consecutive clicks?

0 Answers0