React function export not working after export

Question

I have a function like this:

let ChoosePage = (i) => {
let urls = [
    'http://localhost:3005/products/774944', 
    'http://localhost:3005/products/774945', 
    'http://localhost:3005/products/774946',
    'http://localhost:3005/products/123581', 
    'http://localhost:3005/products/782691', 
    'http://localhost:3005/products/782485',
    'http://localhost:3005/products/782486', 
    'http://localhost:3005/products/782487', 
    'http://localhost:3005/products/782488',
    'http://localhost:3005/products/738471'];
let urls_sliced = urls;
if (i === 0) {
     urls_sliced = urls.slice(0, 3);
 } else if (i === 1) {
     urls_sliced = urls.slice(4, 7);
 } else if (i === 2) {
     urls_sliced = urls.slice(8, 9);
 }
 let show_items = () => {
    ReactDOM.render(urls_sliced.map((url)=>{
            return(
              <Item url={url}/>
            )
            }), document.getElementById('items'));
        }

        show_items()

}
export default ChoosePage;

Im trying to call it by using onClick event in another file.js, like this:

import ChoosePage from './index';

<Page onClick={ChoosePage(0)}>1</Page>
<Page onClick={ChoosePage(1)}>2</Page>
<Page onClick={ChoosePage(2)}>3</Page>

It returns error that Object is not a function, what am I missing?

Try returning a function when ChoosePage is called. let ChoosePage = (i) => { return () => {...};}; export default ChoosePage; — nick zoum
– nick zoum, Commented Jun 11, 2019 at 11:12
try changing onClick={ChoosePage(0)} to onClick={()=>ChoosePage(0)} — Arshpreet Wadehra
– Arshpreet Wadehra, Commented Jun 11, 2019 at 11:12
don't export default, just add export to let ChoosePage and import it as : import { ChoosePage } from './index'; — Roy.B
– Roy.B, Commented Jun 11, 2019 at 11:16

Cherik · Accepted Answer · 2019-06-11 11:16:15Z

1

You need this change:

import ChoosePage from './index';

<Page onClick={e=>{ChoosePage(0)}}>1</Page>
<Page onClick={e=>{ChoosePage(1)}}>2</Page>
<Page onClick={e=>{ChoosePage(2)}}>3</Page>

answered Jun 11, 2019 at 11:16

Cherik

4825 silver badges12 bronze badges

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

Comments

Eugeniu Nicolenco · Accepted Answer · 2019-06-11 11:14:52Z

0

Probably you must use a call back inside the onClick and looking like onClick={()=>{ChoosePage(0)}} or just pass function itself in the onClick body and see what happens onClick={ChoosePage}

answered Jun 11, 2019 at 11:14

Eugeniu Nicolenco

111 bronze badge

Collectives™ on Stack Overflow

React function export not working after export

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related