CODEWITHSUNDEEP
javascriptreactjs
Wiktor Kisielewski
Wiktor Kisielewski

Reputation: 437

React function export not working after export

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?

Upvotes: 0

Views: 57

Answers (2)

Cherik
Cherik

Reputation: 482

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>

Upvotes: 1

Eugeniu Nicolenco
Eugeniu Nicolenco

Reputation: 11

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}

Upvotes: 0

Related Questions