CODEWITHSUNDEEP
javascriptreactjs
White Whale
White Whale

Reputation: 39

How to I export the array in one file to import it into another file in react.js

I want to export array from one file into another file in react.js. In this array, I randomly select 5 videos from video collection and store these array and export this array to the task1 file and broadcast this url array in the video. See my code. This is Array.js.

function Array (){
    const colUrl =[]
    const url =[
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
        ]
     for (var i=0;i<5;i++){
         var rand = url[Math.floor(Math.random()*10)];
         colUrl.push(rand);
      }

      return colUrl;

}

export default Array;

This is the file I want to import and use in the video.

import React, { Component } from 'react';
import ReactPlayer from 'react-player';
import Array from './Array';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function Task1 () {
    return (
      <div>
          <div className="head">
          <h1>Experiment</h1>
          <h3>Task 1</h3>
          <p>Instruction: This experiment includes 3 tasks. </p>
          <p>In Task 1, you will see 10 videos. </p>
      </div>
     <div className="video">
           <ReactPlayer  url={Array[0]} playing/>
        </div>                  
        <div> 
            <button className="task1-next">Next Video</button>
            <Link to="/task2"><button>Go to Task2</button></Link>

        </div>      

</div>

    )
  }


export default Task1;

Upvotes: 1

Views: 2317

Answers (2)

Carlos Osvaldo Chao Cortes
Carlos Osvaldo Chao Cortes

Reputation: 77

You must use the exported function like this.

<ReactPlayer url={Array()[0]} playing/>

Upvotes: 0

Tan Dat
Tan Dat

Reputation: 3117

Your Array is a function. What you exported is a function. But what you actually want is an array of 5 random items. So you should execute the function and export the value.

Like this:

function Array (){
    const colUrl =[]
    const url =[
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
         "https://www.youtube.com/watch?v=d46Azg3Pm4c",
        ]
     for (var i=0;i<5;i++){
         var rand = url[Math.floor(Math.random()*10)];
         colUrl.push(rand);
      }

      return colUrl;

}

export default Array(); // <-- Execute the Array function

Upvotes: 4

Related Questions