CODEWITHSUNDEEP
reactjs
Deke
Deke

Reputation: 4649

How to return element in react class functions

How to return element in react class functions on a click. is it even possible?

class Item extends Component {
  constructor(props) {
    super(props);
    this.itemInfo = this.itemInfo.bind(this);
  }


  itemInfo = () =>{ 
   return <div> some info</div>

  }


  render(){
   return(
     <div>
       <div onClick={this.itemInfo}> Click Here <div>
     </div>
    )
   }

 }

Upvotes: 1

Views: 1090

Answers (4)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

class Item extends React.Component {
  state = {
    showDiv: false
  };

  render() {
    return (
      <div>
        <div
          style={{ cursor: "pointer" }}
          onClick={() =>
            this.setState(prevState => ({
              showDiv: !prevState.showDiv
            }))
          }
        >
          Click Me
        </div>
        {/*Show the INFO DIV ONLY IF THE REQUIRED STATE IS TRUE*/}
        {this.state.showDiv && <InfoDiv />}
      </div>
    );
  }
}

//This is the div which we want on click
var InfoDiv = () => (
  <div style={{ border: "2px solid blue",borderRadius:10, padding: 20 }}>
    <p> Long Text DIVLong Text DIVLong Text DIVLong Text DIVLong Text DIV </p>
  </div>
);
ReactDOM.render(<Item />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 1

cbdeveloper
cbdeveloper

Reputation: 31335

Here's how I would do it:


function ItemInfo() {
  return(
    <div>Some Info</div>
  );
}


class Item extends Component {
  constructor(props) {
    super(props);
    this.handleClick= this.handleClick.bind(this);
    this.state = {
      showInfo: false
    }
  }

 handleClick() {
   this.setState((prevState) => {showInfo: !prevState.showInfo});
 }


  render(){
   return(
     <div>
       <div onClick={this.handleClick}> Click Here <div>
       { this.state.showInfo ? 
          <ItemInfo/>
          : null }
     </div>
    )
   }

 }

Upvotes: 0

Fleezey
Fleezey

Reputation: 166

You can try something like this, using the state and conditional rendering:

class Item extends Component {
  constructor(props) {
    super(props)

    this.state = {
      showMore: false,
    }
  }

  toggleShowMore = () => {
    this.setState({ showMore: !this.state.showMore })
  }

  render() {
    return (
      <div>
        <div onClick={this.toggleShowMore}>
          {this.state.showMore ? 'Show less' : 'Show more'}
        </div>

        {this.state.showMore ? <div>some info</div> : null}
      </div>
    )
  }
}

Upvotes: 0

Murat Karag&#246;z
Murat Karag&#246;z

Reputation: 37584

You should do that in the state. 

  itemInfo = () =>{ 
   this.setState({ component:<div> some info</div> }); 
  }

and render the component like this

 return(
     <div>
       <div onClick={this.itemInfo}> Click Here <div>
        {this.state.component}
     </div>
    )

Upvotes: 0

Related Questions