React Component vs Element for reusability in the same file - reactjs

Question

Within the same file, I'm having an element (or group of elements) that I want to convert to something reusable. But because it is very small, I don't want to create a new file.
Ex.
// Article.js
const Article = props => {
const { name, tel } = props
return (
<div>
<section>
<p>Content A</p>
<small>Contact {name} now, via {tel}</small>
</section>
<small>Contact {name} now, via {tel}</small>
<div>
Having questions?
<small>Contact {name} now, via {tel}</small>
</div>
</div>
)
}
As you can see here, <small>Contact {name} now, via {tel}</small> is being used many times in Article component. So I want to convert it to something reusable, either a Component or just a JSX element.
The key points are:
I do not want to create a new file, because it will never being used by other components.
It needs to display content depending on name and tel variables.
It does not need to be flexible, the name and tel will always be the same as from Article props.
So I tried to achieve my goal with:
Option 1: Separated React Component (in the same file)
// Article.js
const Contact = props => {
const { name, tel } = props
return <small>Contact {name} now, via {tel}</small>
}
const Article = props => {
const { name, tel } = props
return (
<div>
<section>
<p>Content A</p>
<Contact name={name} tel={tel}/>
</section>
<Contact name={name} tel={tel}/>
<div>
Having questions?
<Contact name={name} tel={tel}/>
</div>
</div>
)
}
But from my key point number 3, I find this option redundant because I have no need to make Contact accepting props. Since this component will always display the same name and tel as from Article. So I come up with Option 2.
Option 2: React Component in React Component
// Article.js
const Article = props => {
const { name, tel } = props
const Contact = () => (
<small>Contact {name} now, via {tel}</small>
)
return (
<div>
<section>
<p>Content A</p>
<Contact />
</section>
<Contact />
<div>
Having questions?
<Contact />
</div>
</div>
)
}
The Contact component is shorter because it accepts no props. But the question is if it does not accepting props, shouldn't I just write it as a JSX element? So I come up with Option 3.
Option 3: JSX Element in React Component
// Article.js
const Article = props => {
const { name, tel } = props
const renderContact = <small>Contact {name} now, via {tel}</small>
return (
<div>
<section>
<p>Content A</p>
{renderContact}
</section>
{renderContact}
<div>
Having questions?
{renderContact}
</div>
</div>
)
}
This one I don't know how to name it properly (renderContact, contactElement, or contact?) because I have not seen it much.
Every option is working, but I want to know the differences between these styles,
Performance - how does each one work / how does it affect the perf?
Pros and Cons
Limitations - is there anything to worry when using it?
Popularities - what is the standard way of writing React?

Answer 1

In this situation we write a reusable function usually called renderer
const Article = props => {
const { name, tel } = props
const renderer=(name,tel)=>{
return (
<small>Contact {name} now, via {tel}</small>
)
}
return (
<div>
<section>
<p>Content A</p>
{renderer(name,tel)}
</section>
</div>
</div>
)
}