React Function to Generate random name from Array error - reactjs

Question

I'm getting an error with my component "TypeError: Cannot read property 'length' of undefined" from my RandomName component in my react app . What am I doing wrong?
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function RandomName(props) {
const [name, newName] = useState(0);
const { names } = props;
return (
<div>
<h2>{name}</h2>
<button onClick={() => newName(names[Math.floor(Math.random()*names.length)])}>
New Name
</button>
</div>
);
}
ReactDOM.render(
<RandomName names={['Paul', 'David', 'Kevin']} />,
document.getElementById('root')
);
export default RandomName

Answer 1

You can generate an array first and then you use faker to put fake names in it.
const a = new Array(50).fill(null)
.map(e =>
e = faker.fake("{{name.lastName}}, {{name.firstName}}"))

Answer 2

Your code above seems to be correct but instead of 0 you can pass ''. But from Github repo I noticed you are not passing names in App.js.
<Switch>
<Route path="/">
<>
<RandomName names={['Paul', 'David', 'Kevin']} />
</>
</Route>
</Switch>
Updated Code

Answer 3

You have 3 ways
use typescript to check props data type
function RandomName({names=[]}:{names:Array<string>}){...}
use below code for check propTypes
import PropTypes from 'prop-types';
.
.
.
RandomName .propTypes = {
names: PropTypes.arrayOf(PropTypes.string)
}
and use below code to define function
function RandomName({names=[],...restprops}){...}

Answer 4

I was able to get the component working like so - thank you all for your help:
import React, { useState } from 'react';
import './index.css'
const names=['Mark', 'Steve', 'Tom']
function RandomName() {
const [name, newName] = useState('Bob');
return (
<div id="RandomName-container">
<h2>{name}</h2>
<button onClick={() => newName(names[Math.floor(Math.random()*names.length)])}>
New Name
</button>
</div>
);
}
export default RandomName