Return HTML from react function

Question

I'm new in reactJs I want to return a HTML code from a function

changeValue= (e) =>{
    if(e.target.value=="Albania"){
        return(
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        )
    }
}

render (){

        return(

               <select onChange= {this.changeValue}>
                   {country}
               </select>


        )
    }
}

when I change the select option to Albania the options 1,2 don't show

thank you.

I think you need to study html first. You need to render options in the beginning — ilkerkaran
– ilkerkaran, Commented Apr 8, 2020 at 23:17
i mean when i change the value the event changeValue should work and return the selection but it didn't show the selection i don't know why — Aziz
– Aziz, Commented Apr 8, 2020 at 23:22
and I mean you need to render options first. So user has something to pick on the screen. let me post an answer — ilkerkaran
– ilkerkaran, Commented Apr 8, 2020 at 23:24
yes i have a selection option which contain all countries name and i put an event onChange the selection value to Albania should the function show the options 1,2 — Aziz
– Aziz, Commented Apr 8, 2020 at 23:28
hmm ok, you need to clarify what you are tying to achieve here? — ilkerkaran
– ilkerkaran, Commented Apr 8, 2020 at 23:29

ilkerkaran · Accepted Answer · 2020-04-08 23:34:42Z

1

You can set it to a variable and render it like {country} something like below;

const selectOption1_2 =null;
changeValue= (e) =>{
    if(e.target.value=="Albania"){
        selectOption1_2 = (
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        )
    }
    else
        selectOption1_2 = null;

}

render (){

        return(

               <select onChange= {this.changeValue}>
                   {country}
               </select>
               {selectOption1_2}


        )
    }
}

it is better to put selectOption1_2 in state tho.

edited Apr 8, 2020 at 23:34

answered Apr 8, 2020 at 23:27

ilkerkaran

4,3923 gold badges31 silver badges45 bronze badges

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

3 Comments

Aziz Over a year ago

i want to show the options 1,2 after the user select Albania in the screen not in the console

Adam Jeliński Over a year ago

this won't work, because the component won't rerender. You should store selectOption1_2 in state

ilkerkaran Over a year ago

@AdamJeliński that is what I suggested at the end of my answer. But I couldn't add state since OP didnt share the whole component. Thank you for the downvote

Legwan · Accepted Answer · 2020-04-08 23:40:14Z

0

You can use State for that.

constructor() {
    this.state = {options: countries};  
}

changeValue = (e) => {
    e.persist();
    if(e.target.value=="Albania"){
        this.setState({options: <><option>1</option><option>2</option></>});
    }
}

render () {
    return (
         <select onChange= {this.changeValue}>
             {this.state.options}
         </select>
    )
}

answered Apr 8, 2020 at 23:40

Legwan

513 bronze badges

Collectives™ on Stack Overflow

Return HTML from react function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related