Prop undefined when passing to a function in another .js file

user_13893691 0
Viewed 563

So I am trying to call a function from a header.js file that passes prop-size to the function Testing. In this file I want to use the prop.size but I get error undefined. I would like to avoid a class structure since I do not need to render anything in the file I am passing props to.

Here is the code where I am passing props to:

header.js:

import React, {Component, useState} from 'react'
import Slider from '@material-ui/core/Slider';
import Testing from './CreateArray.js';


import '../Css/Header.css'

function Header() {

let isClicked = false; 

const [size, setValue] = useState(4);
const [selectedValue, setNewValue] = useState("quickSort");

const handleChange = (event, newValue) => {
    setValue(newValue);
    console.log("Size of arr :" + {size} );
}

const currentAlgo = (event, newValue) => {
    
}


function activateSort(){
    console.log("Button Was clicked");
    isClicked = true;
}

return (
    <div>
        <div className = "row"> 
            <div className = "col">
                <h6>Array Size: </h6>
                    <Slider step = {1} min = {4} value = {size} onChange = {handleChange} ></Slider>
                        <h5> {size}</h5>
                    <Testing size = {size}/>
                   
            </div>
            <div className="col-2">
                <select onChange = {currentAlgo}>
                    <option value="quickSort">Quick Sort</option>
                    <option value="mergeSort">Merge Sort</option>
                </select>
            </div>
            <div className = "col-3">

                <button onClick = {() => {activateSort()}}>Sort!</button>

            </div>
        </div>
    </div>
    
    
)
}
export default Header

Here is the file that I want to pass the props value to:

import React, { Component } from 'react'

let numArray = [];

function Testing(props){
    for (var i=0;i < props.size; ++i) 
            numArray[i]=i;
    return numArray;
}
import React, { Component } from 'react'

let numArray = [];

function Testing(props){
    for (var i=0;i < props.size; ++i) 
            numArray[i]=i;
    return numArray;
}
reactjs javascript
2 Answers

EDIT: Your size prop is undefined because you're not exporting your functions properly.

Change this:

  function Testing(props) {
  for (var i = 0; i < props.size; ++i) numArray[i] = i;
  return numArray;
}

To this:

  export function Testing(props) {
  for (var i = 0; i < props.size; ++i) numArray[i] = i;
  return numArray;
}

Change your import in Header.js to this:

import {Testing} from './CreateArray.js';

Send size as a prop down to your Testing Component like this:

<Testing size = {size}/>

To destructure/simplify your Testing function (not required) declare the size prop like below:

 import React, { Component } from 'react'
    
    let numArray = [];
    
    function Testing({size}){
        for (var i=0;i < size; ++i) 
                numArray[i]=i;
        return numArray;
    }
user_33576770

try to use this code, you can send the undefined, with the first conditional

function Testing({size}){
    if (!size) return null;    

    let numArray = []; // use this variable only for this function
    for (let i=0;i < size; ++i) { // change var for let
       numArray[i]=i;
    }
    return numArray;
}

console.log(Testing({ size: 5 })) // response [0 , 1, 2, 3, 4]
user_97219100
Related