CODEWITHSUNDEEP
javascriptcssreactjs
apsasha
apsasha

Reputation: 73

How do I add paddingTop to my input box in reactjs?

In Reactjs, I have a textbox component and a button. When the button is clicked, it creates a new textbox. What I want to do is, when the new textboxes are created, add padding (paddingTop specifically) so they are not attached.

Here is the code, more specifically the <input> tag is where I need this applied.

import React, { Component } from "react";
import Add from "./add/add";

class Textbox extends Component {
state = {
boxtext: "",
addBox: [],
};

handleChange = () => {
// The line below creates a copy of the state, using the spread operator
let fields = { ...this.state.boxtext };
fields = fields + "+";
this.setState({ fields });
};

//Handle box addition click
addTextBox = () => {
const boxAdded = [...this.state.addBox];
boxAdded.push(1);
this.setState({
  addBox: boxAdded,
});
};

render() {
return (
  <div
    style={{
      position: "absolute",
      left: "50%",
      top: "17%",
      transform: "translate(-50%, -50%)",
    }}
    className="form-group"
  >
    <label for="exampleLogicSymbol">Logic Operator</label>
    <input
      type="text"
      className="form-control"
      id="exampleInputLogic"
      aria-describedby="logicHelp"
      placeholder="enter formula"
      onChange={this.props.handleInput}
      value={this.props.content}
    />
    <Add
      className={"btn btn-success btn-sm m-2 p-1 container"}
      clickEvent={this.addTextBox}
    >
      +
    </Add>
    {this.state.addBox.map(() => {
      return (
        <input
          paddingTop
          type="text"
          className="form-control"
          id="exampleInputLogic"
          aria-describedby="logicHelp"
          placeholder="ENTER"
        />
        //clickevent is made up name (property)
      );
    })}
  </div>
);
}
}

export default Textbox;

Upvotes: 0

Views: 1608

Answers (1)

Nasser Abachi
Nasser Abachi

Reputation: 1496

In your case the simplest way is to add the style property to your input:

...
{this.state.addBox.map(() => {
      return (
        <input
          style={{ paddingTop: '15px' }} // <- right here
          type="text"
          className="form-control"
          id="exampleInputLogic"
          aria-describedby="logicHelp"
          placeholder="ENTER"
        />
        //clickevent is made up name (property)
      );
    })}
...

Upvotes: 1

Related Questions