Changing URL Prop does not cause the component to update

[Jordan-Morrison]

The first time I pass in a URL the component works great and looks amazing. However when I go to change the prop to a different URL the component remains the same and does not update.

[winhtaikaung]

Hi @Jordan-Morrison would be great if you could please provide me with example reproducible gist. 🙏

[Jordan-Morrison]

@winhtaikaung Here is an example 😄 Simply modified App.js straight out of create-react-app with react-tiny-link as the only additional package installed. You can see in the GIF below that when the URL prop is updated only the domain name is re-rendered in the preview as everything else remains the same.

import React, {useState, useRef} from 'react';
import { ReactTinyLink } from 'react-tiny-link';
import './App.css';

function App() {

    const [url, setUrl] = useState(null);
    const inputEl = useRef(null);

    function preview() {
        console.log(inputEl.current.value);
        setUrl(inputEl.current.value);
    }

    return (
        <div className="App">
            <input ref={inputEl}></input>
            <button onClick={preview}>Preview Link</button>
            {url && <ReactTinyLink cardSize="small" showGraphic={true} maxLine={2} minLine={1} url={url}/>}
        </div>
    );
}

export default App;

[winhtaikaung]

Hi @Jordan-Morrison , I am going to close the issue as it was fixed on this PR https://github.com/winhtaikaung/react-tiny-link/pull/27

Please feel free to open the issue or PR if you found any difficulties . 😅

[krouspy]

Hello, can we reopen this issue ?

I'm running into the exact issue as stated above When the url is updated, clicking on the component redirects to the new url but metadata are not always updated and the image never changes

[yasir-rafiq]

I a ma facing the same issue

[krouspy]

@winhtaikaung any updates on this ?

[winhtaikaung]

I am working on it @krouspy will let you know once the issue has resolved.

[krouspy]

Nice thank you!