CODEWITHSUNDEEP
reactjsweb-applicationsfrontend
Sandeepa Kariyawasam
Sandeepa Kariyawasam

Reputation: 577

React Js multiple buttons

I have a react code where i need two buttons to give different paragraphs.when each button is clicked, a set of instructions should be displayed. I don't understand how to do it. Here's what I tried so far.

import React from 'react';
function Unilevel(){
    const inst='here are the uni instructions ';

    return <h1>{inst}</h1>;
}
function Scllevel(){
  return <h1>'school instruction'</h1>  
}




class Instruction extends React.Component{
    render(){
        return(
        <div>
            <button onClick={Unilevel}> Uni Instruction</button>
            <button onClick={Scllevel}> School Instruction</button>
        </div>

        );
    }
}
export default Instruction;

I'm a newbie to web-app design and to react. so I would like some guidance.

Upvotes: 0

Views: 2258

Answers (3)

Tkim
Tkim

Reputation: 360

Try this. The property 'content' stored in the state is displayed in a h1 tag. It is refreshed when its value is changed. When you click on the buttons, the property 'content' is updated.

class Instruction extends React.Component {

    state = {
        content: ''
    }

    Unilevel = () => {
        this.setState({ content: 'here are the uni instructions ' });
    };

    Scllevel = () => {
        this.setState({ content: 'school instruction' });
    };

    render() {
        return (
            <>
                <div>
                    <button onClick={this.Unilevel}> Uni Instruction</button>
                    <button onClick={this.Scllevel}> School Instruction</button>
                </div>
                <h1>{this.state.content}</h1>
            </>
        );
    }
}

Upvotes: 1

Mr.Throg
Mr.Throg

Reputation: 1005

check out this 

class Instruction extends React.Component{
        constructor(props){
           state = {
              paragraph: ""
           }
        }

        changeInstruct=(TYPE)=>{
          let inst = ""
          switch(TYPE){
            case "UNI":{
              inst = "here are the uni instructions"
              break;             
            }
            case "SCH_LVL":{
              inst = "school instruction"
              break; 
            }  
            default:{}
          }
        this.setState({paragraph: inst})
        }

        render(){
            return(
            <div>
                <h1>{this.state.paragraph}</h1>
                <button onClick={()=>this.changeInstruct("UNI")}> Uni Instruction</button>
                <button onClick={()=>this.changeInstruct("SCH_LVL")}> School Instruction</button>
            </div>

            );
        }
    }
    export default Instruction;

Upvotes: 1

Travis Tay
Travis Tay

Reputation: 350

It really depends on how you want to display those text and its really vague now as there's way too many methods to look at. I can recommend a youtube link which I use to learn react just last week, and I find it very useful. you can search along the line of conditional rendering or even toast messages or components from react bootstrap

React js tutorial

Upvotes: 1

Related Questions