React zdarzenie po kliknięciu

Question

Cześć.

Uczę się Reacta.I mam małą zagadkę.Otóż jak mogę stworzyć zdarzenie aby po kliknięciu podstawić inny komponent:

Zrobiłem już coś takiego:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home__binding from "./binding/Home__binding";

class Home extends React.Component{
    constructor(props){
        super();
        this.state = {value:null};
    }

    render() {
        return(
            <div className="container">
                <h1>Home !</h1>
                <button className="btn btn-success btn-sm" onClick={() => <Home__binding title="title" content="content"/> }>
                    Binding
                </button>
            </div>
        );
    }
}
export default Home;

 

Answer 1

https://medium.com/better-programming/rendering-components-in-onclick-events-in-react-bc0d7b54e1cd

Comments

Coś nie kumam nie rozumie po co jest to question w pliku App.js ?

mam tak zbudowany kod na podstawie tego tutoriala , lecz nie widzie mi question nie za bardzo kumam o co z nim chodzi 

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home__binding from "./binding/Home__binding";
import HomeList from "./binding/Home__List";

class Home extends React.Component{
    constructor(props){
        super();
        this.state = {value:null};
    }
    state ={
        question:[
            {id:1 , title: 'autor nieznany' , description:'Dzieło autora' , dateTime:'20-03-1931' }
        ],displayQuestion: false
    }

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

    render() {
        if ( this.state.displayQuestions ) {
            questions = (
                <div>
                   {this.state.question.map((question,index)=>{
                       return <HomeList key={question.id} title={question.title} description={question.description} dateTime={question.dateTime} />
                   })}
                </div>
            )
        }
        return(
            <div className="container">
                <h1>Home !</h1>
                <button className="btn btn-success btn-sm" onClick={this.displayQuestion}>
                    Binding
                </button>
                {questions}
               {/* <HomeList title="autor nieznany" description="Dzieło autora" dateTime="data publikacji"/>*/}
            </div>
        );
    }
}
export default Home;

i Question.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const HomeList = props => {
    return(
        <div className="card text-white bg-secondary mb-3">
            <div className="card-header">{props.dateTime}</div>
            <div className="card-body">
                <h5 className="card-title">{props.title}</h5>
                <p className="card-text">{props.description}.</p>
            </div>
        </div>
    )
}
export default HomeList;

 

---

Na początek masz 

import HomeList from "./binding/Home__List";

a twój plik nazywa się Question.js.

No i z którym question masz problem.

---

no dobra mój plik się inaczej nazywa 

  render() {
        if ( this.state.displayQuestions ) {
            questions = (
                <div>
                   {this.state.question.map((question,index)=>{
                       return <HomeList key={question.id} title={question.title} description={question.description} dateTime={question.dateTime} />
                   })}
                </div>
            )
        }

Z tym pierwszym question mam problem 

---

Konkretnie to zrobiłem coś takiego:

  if(this.state.displayQuestion){
             show = {
                 return <HomeForm/>
             }
        }

Tylko ,że cały czas podkreśla mi na czerwono show i błędy mam 

---

Działa leczę uważam ,że jest za kodu :

   render() {
        const posts = this.state.posts.map(el =>{
          return <HomeList key={el.id} title={el.title} description={el.description} dateTime={el.dateTime}/>;
        });
        if(this.state.displayQuestion){
            return( <div className="container">
                <h1>Home !</h1>
                <button className="btn btn-success btn-sm" onClick={this.displayQuestion}>Binding</button>
                <HomeForm/>
                {posts}
            </div>
            );
        }
        return(
            <div className="container">
                <h1>Home !</h1>
                <button className="btn btn-success btn-sm" onClick={this.displayQuestion}>Binding</button>
                {posts}
            </div>
        );
    }

jak by można to uprościć ?

---

render() {
     const posts = this.state.posts.map(el =>{
       return <HomeList key={el.id} title={el.title} description={el.description} dateTime={el.dateTime}/>;
     });
     if(){
         return( <div className="container">
             <h1>Home !</h1>
             <button className="btn btn-success btn-sm" onClick={this.displayQuestion}>Binding</button>
             {this.state.displayQuestion ? (<HomeForm/>) : null}
             {posts}
         </div>
         );
     }
 
 }

https://pl.reactjs.org/docs/conditional-rendering.html