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

Question

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;

Tan Dat · Accepted Answer · 2020-02-29 01:12:47Z

4

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

answered Feb 29, 2020 at 1:12

Tan Dat

3,1271 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tan Dat Over a year ago

@WhiteWhale I'll appreciate if you could mark my answer as correct. :P

Carlos Osvaldo Chao Cortes · Accepted Answer · 2020-02-29 03:09:52Z

0

You must use the exported function like this.

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

answered Feb 29, 2020 at 3:09

Carlos Osvaldo Chao Cortes

776 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related