How to store jsx into a variable using react?

Question

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 method. 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_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(); //some method similar to 
                //get_type1_link method
                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.

cant' see the get_type2_link() function. I guess it's a typo you have two function called get_type1_link(). — morissetcl
– morissetcl, Commented Aug 15, 2019 at 7:11
You have written get_type1_link twice, may be a typo. Also can't find get_link & get_text. — ravibagul91
– ravibagul91, Commented Aug 15, 2019 at 7:44

ravibagul91 · Accepted Answer · 2019-08-15 07:42:17Z

2

I think issue is with your extends,

class ListPanel extends react.purecomponent {

It should be

class ListPanel extends React.PureComponent {

And also another issue is your render function, you have not return anything. Your render function should return like,

class ListItem extends React.PureComponent {
    render = () => {
       return(
        <li onClick={this.props.link}> //props.link should be this.props.link
            <div className="text">
                {this.props.text}
            </div>
        </li>
       )
    }
 }

edited Aug 15, 2019 at 7:42

answered Aug 15, 2019 at 7:13

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

How to store jsx into a variable using react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related