Reactで最初以外のコンポーネントを<div>で囲いたい

Question

前提・実現したいこと

Reactで動画を複数個再生できるページを作成しております。
動画部分はコンポーネントで分けているのですが、1つ目以外の動画を<div>で囲い、デザインを適用したいです。
その際にコンポーネントは一つ目の動画、2つ目以降の動画という風に二つに分けるしか方法はないのでしょうか？

該当のソースコード

export const VideoContent = (props) => {

    const renderVideo = () => {
        return props.video.map((v, index) => 
            <VideoPlayer {...v} />
        );
    }

    return(
        <>
            <div>
                {renderVideo()}
            </div>
        </>
    )
}

export const VideoPlayer = React.memo(props => {

    const src = 'http://localhost:8000' + props.video;

    return(
        <div>
            <video>
                <source src={src} />
            </video>
        </div>
    )
});

###捕捉情報
下記のようなデザインにしたいと考えています。

<video/>
<div>
    <video/>
    <video/>
</div>

Comments

[hoshi-takanori]

質問が漠然としていてよく分かりませんが、例えば最初の video を囲む div に特定の class を指定してデザインを付ければ良いのでは。

[te_ff]

情報捕捉いたしました。
上記のようなデザインにしたいため、2つ目以降を囲うDIVを作成できればと考えているのですが、なにか解決策ありますでしょうか？

Answer 1

その場合は 1 つ目の要素と 2 つ目以降の要素を分けて処理する必要がありますね。
分割代入 を使うとこんな感じでしょうか。

export const VideoContent = (props) => {
  const [first, ...rest] = props.video;

  return (
    <>
      {first && <VideoPlayer {...first} />}
      <div>
        {rest.map((v, index) => <VideoPlayer key={index} {...v} />)}
      </div>
    </>
  );
};

Comments

[te_ff]

分割代入なんてものがあるんですね！
助かりました！
ありがとうございます！！！