● React で登場する ... （3点リーダー）（ドット3つ）（JSX Spread Attributes）の使い方

これは Spread Attributes（スプレッド構文） といって ES6 Javascript での記法です。Spread syntax (...)
意味としては以下のコードと同じ意味合いとなります。

● Spread syntax (...) の例

const obj = {
  id:1,
  name: 'John',
  email: 'john@test.local',
}
console.log( obj );
console.log( {...obj} );

結果

{ id: 1, name: 'John', email: 'john@test.local' }
{ id: 1, name: 'John', email: 'john@test.local' }

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child foo={props.foo} bar={props.bar} />
}

　　　　　　　↓

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child {...props} />
}

● なぜ JSX Spread Attributes を利用するのか？

子コンポーネントに渡したい値に変更があった場合に変更箇所が少なくて済みます。

props に hogee を追加する場合でも提示する箇所のみの変更でokです。

const props = { foo: "foo", bar: "bar", hoge:"hoge" };
render() {
  return <Child {...props} />
}