Input does not hold the color value when submitting.

programming
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorizer</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

    <style>
        #container {
            padding: 50px;
            background-color: #FFF;
        }

        .colorSquare {
            box-shadow: 0px 0px 25px 0px #333;
            width: 242px;
            height: 242px;
            margin-bottom: 15px;
        }

        .colorArea input {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #CCC;
        }

        .colorArea button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
            background-color: #666;
            color: #FFF;
            border: 2px solid #666;
        }

        .colorArea button:hover {
            background-color: #111;
            border-color: #111;
            cursor: pointer;
        }

        #colorHeading {
            padding: 0;
            margin: 50px;
            margin-bottom: -20px;
            font-family: "sans-serif";
        }

    </style>

</head>
<body>

    <h1 id="colorHeading">Colorizer</h1>

    <div id="container"></div>
    <script type="text/babel">

    class Colorizer extends React.Component {
        constructor (props) {
            super (props);
        
        this.state = {
            color: "",
            bgColor: "",
        };

        this.colorValue = this.colorValue.bind(this);
        this.setNewColor = this.setNewColor.bind(this);
        
        }

        colorValue (e) {
            this.setState ({
                color: e.target.value
            });
        }

        setNewColor (e) {
            this.setState ({
                bgColor: this.state.color,
            });

            this._input.focus();
            this._input.value = "";

            e.prevent.Default ();

        }

        render () {

            var squareStyle = {
                backgroundColor: this.state.bgColor

            };

            var self = this;

            return (
                <div className="colorArea">
                    <div style={squareStyle} className="colorSquare"></div>

                    <form onSubmit={this.setNewColor}>
                        <input onChange={this.colorValue} 
                        ref = {
                            function(el) {
                                self._input = el;
                            }
                        }
                        placeholder="Enter a color value"></input>
                        <button type="submit">go</button>
                    </form>
                    <ColorLabel color={this.state.bgColor}/>
                </div>
            );
        }
    }

    var heading = document.querySelector("#colorHeading")

    class ColorLabel extends React.Component {
        render () {
            return ReactDOM.createPortal (
                ": " + this.props.color,
                heading
            );
        }
    }

    ReactDOM.render (
        <div>
            <Colorizer />
        </div>,
        document.querySelector("#container")
    );
        


    </script>
    
</body>
</html>
2

Hi @jkredfoot - welcome to the forums! When you press submit, does the entire page refresh by any chance?

Thanks,
Kirupa :slight_smile:

3

It briefly shows the color and then refreshes again, yes.

4

Gotcha! You were very close. Change e.prevent.Default(); to e.preventDefault();. That should do the trick! :slight_smile:

5

Yes, that worked! Thank you!