CODEWITHSUNDEEP
react-nativereact-hooks
Jukka Koivu
Jukka Koivu

Reputation: 319

How can I add dash between the value on input field?

I am trying to achieve something like this when the user is typing in the input field ABC you should get - after letter C while user is typing so in the end value should show ABC-123.

I have following hook const [newCar, setNewCar] = useState('') that I am calling in the following function

const addCar = () => {
    if (newCar.length > 0) {
      setCars([
        ...cars,
        {
          id: cars.length + 1,
          license: newCar,
        },
      ])
      setValid(true)
    } else {
      setValid(false)
    }
  }

And I created changeText function as follows

const changeText = (newCar) => {
    var newVal = newCar.length
    if ((newVal === 3) && newVal >= newCar.length){
      newCar = newCar + "-"
    }
    if (newCar.length === 7) {
      setNewCar(newCar);
    }
  }
``` that I call in the `onChangeText={(newCar) => changeText(newCar)}` But when I try to write something in the input field it doesn't add the dash.

Upvotes: 0

Views: 923

Answers (2)

Jukka Koivu
Jukka Koivu

Reputation: 319

The problem was solved by running yarn upgrade --latest did it before using the yarn upgrade [email protected] as an example

Upvotes: 0

Nahuel López
Nahuel López

Reputation: 26

Your css selectors are wrong.

You want to style every h2/strong/p that are children of your S.StaffContent component. To do that, the proper css selector is & > h2

Final styles will look like this

  & > h2 {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  & > p {
    text-align: left;
    margin-bottom: 1em;
  }
  & > strong {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 1em;
  }

By doing so, will get your components styled, assuming that the DOM looks like this.

<div classname='StaffContent'>
   <h2>Styled h2</h2>
   <p>Styled p</p>
   <strong>Styled h2</strong>
</div>

Otherwise, if you wanted to apply the same styles to all the h2, strong and p elements descendants, at any level in the tree, you will need to add universal selectors.

const Component = styled.div(`
  h2, * > h2 {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    color: white;
  }
  p, * > p {
    text-align: left;
    margin-bottom: 1em;
  }
  strong, * > strong {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 1em;
  }
`);

Upvotes: 1

Related Questions