making multiple functions more efficient react js

Question

I have a code

export const a = () => {
     return (
           <WebView source = {{ uri: 'youtube1.com' }} />
     )
 }

export const b = () => {
     return (
           <WebView source = {{ uri: 'youtube2.com' }} />
     )
 }

 export const c = () => {
     return (
           <WebView source = {{ uri: 'youtube3.com' }} />
     )
 }

and I have about 10 of these.

What is a good way to reduce the repeating code and make code more efficient?

Many thanks in advance

Answer 1

You could make this code more efficient by having a function like below

export const webViewRenderer = (link) => {
    return (
        <Webview source={{ uri: link }} />
    )
}

And then import it in the file you want to use it, and use it in the following way

const a = webViewRenderer('youtube1.com');
const b = webViewRenderer('youtube2.com');
const c = webViewRenderer('youtube.com');

You would then render a, b, and c respectively in your component's return statement.