Replace string in text without onClick Function

Question

I'm working on embedding YT videos into the video component view using this tutorial as a guide:

https://reactnativecode.com/find-replace-string-text-component/

It works but I have to replace part of the string manually to display it on the page when I paste in the URL.

Raw Youtube URL https://www.youtube.com/watch?v=6ZhJjRBnWYk

Manually typed https://www.youtube.com/embed/6ZhJjRBnWYk

For aesthetic there's no submit button so when the url is pasted in, it automatically renders the video. Normally, the onClick would handle the fixURLString function.

I'm trying to replace the string but it's not working because I'm not sure how to handle the fixURLString without a button as shown in the tutorial.

export default class VideoEmbed extends Component {
  constructor(props) {
    super(props)
    this.state = {
      embeds: [],
      url: '',
    }
  }

  ...
    onChange = (e) => {
    e.preventDefault()
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  fixUrlString = () => {
    const urlString = this.state.url.toString()
    const newText = urlString.replace('/watch?v=', '/embed/')
    this.setState({ url: newText })
  }

  ...
            <div className="upload-image-box">
            <form>
              <input
                name="url"
                type="text" 
                placeholder="paste YouTube embed code here"
                value={this.state.url}
                onChange={(e) => this.onChange(e)}
              />
            </form>
          </div>

 ...

kernel72 · Accepted Answer · 2019-10-07 13:08:35Z

1

Try to call fixUrlString inside onChange with typed url, and set the state for already transformed string.


 onChange = (e) => {
    e.preventDefault()
    const fixedString = this.fixUrlString(e.target.value)
    this.setState({
      [e.target.name]: fixedString,
      url: fixedString
    })
  }

  fixUrlString = (original) => {
    const urlString = original.toString()
    return urlString.replace('/watch?v=', '/embed/')
  }

answered Oct 7, 2019 at 13:08

kernel72

996 bronze badges

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

1 Comment

Noble Polygon Over a year ago

Thanks! This fixed my issue :)

Luïs · Accepted Answer · 2019-10-07 13:05:54Z

0

You can modify your fixUrlString function to take your URL and simply return the new URL instead of calling setState within your function. This is known as a pure function. (A function which takes input and returns an output without modifying any data outside that function.)

Like this:

fixUrlString = (urlString) => {
    const newText = urlString.replace('/watch?v=', '/embed/');
    return newText;
}

Now you can simple call setState anywhere in your component and fix your url using that function.

Using your onChange as an example:

this.setState({
      [e.target.name]: this.fixUrlString(e.target.value),
});

answered Oct 7, 2019 at 13:05

Luïs

2,9334 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Replace string in text without onClick Function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related