0

i am new to programming. I want to implement the below,

when i click a list item i want to navigate to another page.

What i am trying to do? I have list items in a side panel. when i click on the list item it should navigate to another page.

So i have a listpanel component which renders the listitem component. On click list item, based on item_data_type it should take to the link got from get_type1_link or get_type2_link methods. however, it returns an object. I am not sure where i am making mistake.

class ListPanel extends react.purecomponent {

    get_type1_link = () => {
        const item_data = this.props.item_data;
        const itemss = this.props.items;
        const {itemname, item_id} = item_data.properties;
        const filtered_item = items && items.find(item => item.id === 
        item_id); 
        const item_name = (filtered_item) ? filtered_item.itemname : 
        (itemname ? itemname : item_id);

        if (filtered_item) {
            return (<Link to={`/someurl/${item_data.properties.item_id}`}> 
            {item_name}</Link>);
        } else {
            return <span>{item_name}</span>;
        }
    };
    get_type1_link = () => {
        const item_data = this.props.item_data;
        let link;
        switch (item_data.type) {
            case 'type1':
                link = this.get_type1_link();
                break;
            case 'type2':
                link = this.get_type2_link();
                break;
            default:
                return link=window.location.href;
            }
            return link;
    };
    render = () => {
        const list_item = this.props.;
        return (
            <ListItem
                key={list_item.id}
                text={this.get_text}
                link={this.get_link}/>
    );
}

class ListItem extends react.purecomponent {
    render = () => {

        <li onClick={props.link}>
            <div className="text">
                    {this.props.text}
             </div>
        </li>
     }
 }

I think there is a problem in the way i am storing the value returned from get_type1_link method into variable link. since get_type1_link returns a jsx (Link). Could someone help me with this thanks.

stackoverflow_user
  • 291
  • 4
  • 14

1 Answers1

0

That's because link is an object, presumably a string although its hard to tell without the get_link helpers. onClick wants a callback. To interact with the browser, you should use the javascript window api https://developer.mozilla.org/en-US/docs/Web/API/Window.

So to change the window, change <li onClick={props.link}> to <li onClick={{() => window.location.href = props.link}}> as shown here How to get the browser to navigate to URL in JavaScript.

CyclopeanCity
  • 91
  • 8