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

Question

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;

Nasser Abachi · Accepted Answer · 2020-07-10 18:47:28Z

1

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)
      );
    })}
...

answered Jul 10, 2020 at 18:47

Nasser Abachi

1,5362 gold badges10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

apsasha Over a year ago

this works! the issue is, it is making the textbox bigger rather than adding space between them, how would I go about that?

apsasha Over a year ago

I got it, I used margin! :)

Nasser Abachi Over a year ago

You need to use the marginTop in this case

apsasha Over a year ago

How would I make it so that it doesn't move all the textboxes when a new one is created?

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related