User input not affecting border radius correctly

Question

My goal is to create a border radius previewer where the user defines the affect of the border radius. When I try to make an input nothing happens when I put in a value. When I delete the value I typed in, then the default value change disappears.

I've tried to modify the code and I've tried searching other questions and answers but I haven't found a solution.

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

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,
      background: "#73AD21",
      padding: "20px",
      width: "200px",
      height: "150px",
    }
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;

score 1 · Answer 1 · answered Sep 03 '20 at 02:06

numbered string is not recognized for inline style. borderRadius: "100" means nothing You should either write borderRadius: "100px" or borderRadius: 100

You can simply update handleChange function to keep only number as the state value.

Updated Code

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

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: Number(val)});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,
      background: "#73AD21",
      padding: "20px",
      width: "200px",
      height: "150px",
    }
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;

bertdida · Accepted Answer · 2020-09-03T02:50:53.603

I supposed you want to apply topleft, topright, bottomright and bottomleft states as borderRadius — you could use string interpolation to append px on each value.

const { topleft, topright, bottomright, bottomleft } = this.state;

const borderStyle = {
  borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
  background: "#73AD21",
  padding: "20px",
  width: "200px",
  height: "150px"
};

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app_root"></div>    
<script type="text/babel">
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      topleft: 30,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    };
  }

  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({ [nam]: val });
  };

  render() {
    const { topleft, topright, bottomright, bottomleft } = this.state;

    const borderStyle = {
      borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
      background: "#73AD21",
      padding: "20px",
      width: "200px",
      height: "150px"
    };

    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app_root"));

</script>

score 0 · Answer 3 · answered Sep 03 '20 at 03:04

So what you have to do brother is append a string to the state when you are setting the state and that is how 'px' is added.Complete code

class App extends Component {
constructor(props) {
  super(props)
  this.state = {
    topleft: '30px',
    topright: '30px',
    bottomright: '30px',
    bottomleft: '30px'
  }
}

handleChange = (event) => {
  let nam = event.target.name;
  let val = event.target.value;
  this.setState({[nam]: val+'px'});
}

render() {
  console.log(this.state.topleft);
  const borderStyle = {
    borderRadius: this.state.topleft,
    background: "#73AD21",
    padding: "20px",
    width: "200px",
    height: "150px",
  }
  
  return (
    <div className="App">
      <h1>Border-Radius Previewer</h1>
      <p style={borderStyle}>Box</p>
      <p>Border-Radius Values:</p>
      <input type="string" name="topleft" onChange={this.handleChange} />
      <input type="string" name="topright" onChange={this.handleChange} />
      <input type="string" name="bottomright" onChange={this.handleChange} />
      <input type="string" name="bottomleft" onChange={this.handleChange} />
    </div>
  );
}

}

export default App;

User input not affecting border radius correctly

3 Answers3