CODEWITHSUNDEEP
reactjsshow-hide
ariful Islam
ariful Islam

Reputation: 107

Hide all div and show one div on clicking multiple button

I am trying to fit 3 component in a single page by hiding/showing on a div.But I am not really getting into how to do it.This is the first div.

<div>
                        <p>What is the type of your property?</p>
                        <button >Residence</button>

                        <button>Commercial</button>

                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Back</span>

                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Next</span>

                    </div>

Only If i click the 'Commercial' or 'Next' button it would go into the second div and first div will hide.

<div>
                    <p>What is the type of your commercial property?</p>

                    <button>Office</button>

                    <button>Restaurant</button>

                    <button >Outlet</button>
                    <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Back</span>

                    <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Next</span>
                </div>

and lastly if i click 'restaurant' button from the first div and any button of the second div except the back button it will go into the third div and other div will hide.this is the third div.

<div>

            <div className='slider'  style={{ marginTop:'165px',marginLeft:'319px',width:'700px',backgroundColor:'EF5350'}} >

                <Slider min={850} max={5000} value={value} onChangeStart={this.handleChangeStart}
                    onChange={this.handleChange}
                    onChangeComplete={this.handleChangeComplete}
                />
                <div className='value'>{value} Squarefeet</div>
                <div style={{marginTop:'86px'}}>



                        <span onChange={this.handleChange} onClick={() => this.saveValue()} >Next</span>
                       <span onChange={this.handleChange} onClick={() => this.saveValue()} >Next</span>

                </div>

            </div>
    </div>

I tried to do it this way. But it will not work.

import React from 'react';
import Link from "next/link";
class Jh extends React.Component {
    constructor() {
        super();
        this.state = {
            shown: true,
            hide: false
        };
    }

    toggle() {
        this.setState({
            shown: !this.state.shown
        });
    }

    toggles() {
        this.setState({
            shown: !this.state.hide
        });
    }

    render() {
        var shown = {
            display: this.state.shown ? "block" : "none"
        };

        var hidden = {
            display: this.state.shown ? "none" : "block"
        }

        return (
            <div>
                <button onClick={this.toggle.bind(this)} style={ shown }>
                    <div>
                        <p>What is the type of your property?</p>
                        <button >Residence</button>

                        <button>Commercial</button>

                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Back</span>

                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Next</span>

                    </div>



                </button>

                <button onClick={this.toggles.bind(this)} style={ hidden }>
                    <div>
                        <p>What is the type of your commercial property?</p>

                        <button>Office</button>

                        <button>Restaurant</button>

                        <button >Outlet</button>
                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Back</span>

                        <span style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}>Next</span>
                    </div>
                </button>

            </div>
        )
    }
}
export default Jh

What should be my approach?

Upvotes: 3

Views: 592

Answers (4)

A.K.47
A.K.47

Reputation: 237

There are many ways to solve this problem. But in my opinion the best solution is the one which solves the problem in a succinct manner. Please find below the working solution which I have tried and works like a charm:

import React from "react";

class Pages extends React.Component {
  state = {
    activeTab: 1
  };
  toggle = tab => {
    this.setState({
      activeTab: tab
    });
  };
  togglePage = page => {
    if (page === "next") {
      this.setState({
        activeTab: this.state.activeTab + 1
      });
    } else if (page === "back") {
      this.setState({
        activeTab: this.state.activeTab - 1
      });
    }
  };

  render() {
    return (
      <div style={{ background: "#dedede" }}>
        <div hidden={this.state.activeTab === 1 ? false : true}>
          <p>1) What is the type of your property?</p>
          <button class="btn btn-primary" onClick={() => this.toggle(2)}>
            Residence
          </button>
          <button onClick={() => this.toggle(2)}>Commercial</button>
        </div>

        <div hidden={this.state.activeTab === 2 ? false : true}>
          <p>2) What is the type of your commercial property?</p>
          <button onClick={() => this.toggle(3)}>Office</button>
          <button onClick={() => this.toggle(3)}>Restaurant</button>
          <button onClick={() => this.toggle(3)}>Outlet</button>
        </div>

        <div hidden={this.state.activeTab === 3 ? false : true}>
          <p>3) Is this your first business?</p>
          <button onClick={this.NextAction}>Yes</button>
          <button onClick={this.NextAction}>No</button>
        </div>

        <div>
          <button
            onClick={() => this.togglePage("back")}
            name="back"
            disabled={this.state.activeTab === 1 ? true : false}
          >
            Back
          </button>
          <button
            onClick={() => this.togglePage("next")}
            name="next"
            disabled={this.state.activeTab === 3 ? true : false}
          >
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default Pages;

In react we have a hidden attribute which you can use to show/hide the elements without having to write any css for the same. And I have tried to solve the problem with the least number of variables.

The sandbox for the same can be found here : https://codesandbox.io/s/mysolution-g8fu6

Hope this helps!

Upvotes: 0

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

I believe you are looking for something like this.

Main things to-do:

Enhance your state-value. Keep track of the different pages in sequence by using an array. Track the current page. Track the start and end of the collection.

Here is the sandbox as well: https://codesandbox.io/s/unruffled-sun-gpzx6

import React from "react";

class Pages extends React.Component {
  state = {
    currentPage: "property",
    pages: ["property", "type", "firstBusiness"],
    start: true,
    end: false
  };

  changePage = event => {
    const { currentPage, pages } = this.state;
    const { name } = event.target;
    //check if we are going to end
    if (
      name == "next" &&
      pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]
    ) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        end: true,
        start: false
      });
      //go to next page
    } else if (name == "next") {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        start: false
      });
      //check if we are going to beginning
    } else if (
      name == "back" &&
      currentPage !== pages[0] &&
      pages[pages.indexOf(currentPage) - 1] == pages[0]
    ) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) - 1],
        start: true
      });
      //go back one page
    } else {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) - 1],
        end: false
      });
    }
  };

  goToNextPage = () => {
    const { currentPage, pages, end } = this.state;
    //check if we are going to end
    if (pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        end: true,
        start: false
      });
      //go to next page
    } else if (end) {
      return;
    } else {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        start: false
      });
    }
  };

  render() {
    const { currentPage, start, end } = this.state;
    return (
      <div style={{ background: "gray" }}>
        {currentPage === "property" ? (
          <div>
            <p>What is the type of your property?</p>
            <button onClick={this.goToNextPage}>Residence</button>
            <button onClick={this.goToNextPage}>Commercial</button>
          </div>
        ) : null}

        {currentPage === "type" ? (
          <div>
            <p>What is the type of your commercial property?</p>
            <button onClick={this.goToNextPage}>Office</button>
            <button onClick={this.goToNextPage}>Restaurant</button>
            <button onClick={this.goToNextPage}>Outlet</button>
          </div>
        ) : null}

        {currentPage === "firstBusiness" ? (
          <div>
            <p>Is this your first business?</p>
            <button onClick={this.goToNextPage}>Yes</button>
            <button onClick={this.goToNextPage}>No</button>
          </div>
        ) : null}

        <div>
          <button onClick={this.changePage} name="back" disabled={start}>
            Back
          </button>
          <button onClick={this.changePage} name="next" disabled={end}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default Pages;

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53944

There are many patterns to achieve a "switch case", I'll try to show my favorites:

For sipmlicity, I'll use a generic use case.

Straight Forward

Managing visible state for every component:

return {visible && <CoolComponent id={1} />};

Switch case in disguise

Manage a state of object keys. (currentCounter)

const countersPicker = {
  counter1: <Counter id={1} />,
  counter2: <Counter id={2} />,
  coolComponent:  <CoolComponent id={3} />
};

  return {countersPicker[currentCounter]};

Here you also can take action on the object, for example, adding a header:

  return {Object.entries(countersPicker).map(([key,component]) => 
    <div key={key}>
      <h1>Component key = {key}</h1>
      {component}
    </div> 
  )};

Filter Children

Manage a predicate and use it for filtering/mapping the children. Check React.Children API.

  return (
    <FilterComponents predicate={predicate}>
      <Counter key={1} id={1} />
      <Counter key={2} id={2} />
      <CoolComponent key={3} id={3} />
      <BestComponent key={4} id={4} />
    </FilterComponents>
);

function FilterComponents({ children, predicate }) {
  const filteredChildren = React.Children.toArray(children).filter(child =>
    // Use the predicate.
    // Filter a child by key, key & type or even use ref etc.
  );
  return <div>{filteredChildren}</div>;
}

Upvotes: 2

Melbourne2991
Melbourne2991

Reputation: 11797

So essentially you want router like functionality. Here is one approach:

class FirstPage extends React.Component {
  render() {
    //...first page content
  }
}

class SecondPage extends React.Component {
  render() {
    //...second page content
  }
}

const pages = {
  first: FirstPage,
  second: SecondPage
};

class App extends React.Component {
  constructor() {
    this.state = {
      page: 'first'
    };
  }

  render() {
    const PageComponent = pages[this.state.page];

    return <div>
      <button onClick={() => this.setState({page: 'first'})}>First page</button>
      <button onClick={() => this.setState({page: 'second'})}>Second page</button>

      <PageComponent/>
    </div>
  }
}

Upvotes: 1

Related Questions