Switch to different component after button click with React

react render component onclick
react onclick show component
react switch component on click
how to re-render a component on button click in react
react trigger click on another component
react change component on button click
react add component on click
call another component on button click react

I am absolutely new to React and need to create a button to take the user from a current component (MovieView) to the main one (MainView). I managed to create it properly and I used onClick to trigger the display of MainView. I know I cannot call a class from a function (so as console says), so I created a second function to be called and trigger MainView. But as you may wonder, it does not work. This is the code I am using:

import React from 'react';
import { MainView } from '../main-view/main-view';

function NewButton() {
  return <MainView />;
}

export class MovieView extends React.Component {

  constructor() {
    super();

    this.state = {};
  }

  render() {
    const { movie } = this.props;

    if (!movie) return null;

    return (
      <div className="movie-view">
        <img className="movie-poster" src={movie.imagePath} />
        <div className="movie-title">
          <span className="label">Title: </span>
          <span className="value">{movie.title}</span>
        </div>
        <div className="movie-description">
          <span className="label">Description: </span>
          <span className="value">{movie.plot}</span>
        </div>

        <div className="movie-genre">
          <span className="label">Genre: </span>
          <span className="value">{movie.genre.name}</span>
        </div>
        <div className="movie-director">
          <span className="label">Director: </span>
          <span className="value">{movie.director.name}</span>
        </div>
        <div className="back-movies">
          <button onClick={NewButton}>Back</button>
        </div>
      </div>
    );
  }
}

Could you any seeing this to point the path to take or how I can call this MainView class properly. I understand it's a simple task, but I am afraid I still haven't absorbed React principles yet. Thanks in advance to you all.

Changing a component in reactjs upon clicking a button, If what I understand is correct you want to change the form component rendered when you click the button in ConfigurationMenu . Try this� In many scenarios you want to display a completely different component inside a screen, when a button or link is clicked. Think about a navigation structure, for example. How can you do so? In this example I’m managing the state centralized in the App component. First, attach a click event to a component:

I make the Class into a Function Component instead, and implement it like this :-)

import React from "react";
import { MainView } from '../main-view/main-view';

export const MovieView = ({ movie }) => {
    const { showMainView, setShowMainView } = React.useState(false);

    if (!!movie) {
        return null;
    }

    function toggleMainView() {
        setShowMainView(true);
    }

    return (
        <React.Fragment>
            { showMainView ? (
                <MainView />
            ) : (
                <div className="movie-view">
                    <img className="movie-poster" src={movie.imagePath} />
                    <div className="movie-title">
                        <span className="label">Title: </span>
                        <span className="value">{movie.title}</span>
                    </div>
                    <div className="movie-description">
                        <span className="label">Description: </span>
                        <span className="value">{movie.plot}</span>
                    </div>

                    <div className="movie-genre">
                        <span className="label">Genre: </span>
                        <span className="value">{movie.genre.name}</span>
                    </div>
                    <div className="movie-director">
                        <span className="label">Director: </span>
                        <span className="value">{movie.director.name}</span>
                    </div>
                    <div className="back-movies">
                        <button onClick={() => toggleMainView()}>Back</button>
                    </div>
                </div>
            )}
        </React.Fragment>
    );
};
export default MovieView;

How to render a component on button click in React?, I will basically support different type of payment methods, and depending which one user On button click, conditionally assign a value to it when a payment mode is selected, and change the state to view the form: just add a conditional to your render method which examines state and renders the new component if the� In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app. Click on any of the examples below to see code snippets and common uses: Call a Function After Clicking a Button; Call an Inline Function in an onClick Event Handler

If you need to add or remove components or show a new view based on an user action in react we need to do this via state .

import React from 'react';
import { MainView } from '../main-view/main-view';

export class MovieView extends React.Component {

constructor() {
super();

this.state = {
  showMainView: false;
};
}

toggleMainView = () => this.setState(prevState => ({ showMainView: 
!prevState.showMainView})) 

render() {
const { movie } = this.props;
const { showMainView } = this.state;
if (!movie) return null;

return (
  <div className="movie-view">
    <img className="movie-poster" src={movie.imagePath} />
    <div className="movie-title">
      <span className="label">Title: </span>
      <span className="value">{movie.title}</span>
    </div>
    <div className="movie-description">
      <span className="label">Description: </span>
      <span className="value">{movie.plot}</span>
    </div>

    <div className="movie-genre">
      <span className="label">Genre: </span>
      <span className="value">{movie.genre.name}</span>
    </div>
    <div className="movie-director">
      <span className="label">Director: </span>
      <span className="value">{movie.director.name}</span>
    </div>
    <div className="back-movies">
      <button onClick={this.toggleMainView}>Back</button>
    </div>
    // render the mainView based on the state
    { showMainView && <MainView />}
  </div>
);
}
}

Rendering Components in onClick Events in React, Often in React you want to render a series of components when a button is clicked. While it's not difficult to hack together a solution, I recently� I'm new to react and i'm trying to load another page when user clicks a button. I have used window.location but nothing happens when i click the button.

I reached a solution that I'd not do with the help I had here. I have first pasted here some pieces of code but, I believe it can be helpful to give the whole answer.

So, the question I placed here was regarding a component called <MovieView, that was a part of an app that interacted with another component (in another file) called MainView.

The solution was the insertion of the method onClick on the live 14 of <MovieView> and the button on line 39 that you can see at this file on Github. If the file was updated, check the version for November 22nd.

The solution had, however, been found in the main component, <MainView>, adding code on lines 48 and 49. Here is the link to the file: https://github.com/cgobbet/react-client/blob/master/src/components/main-view/main-view.jsx

The repository with the whole app is on this page: https://github.com/cgobbet/react-client.

And sorry for the reviewers (I had accidentally deleted part of the fantastic answer submitted by @nick-miller.

How to Show and Hide ReactJS Components, Everything in the React app is a component, so we have to play around We have three different buttons, and on click of every button, the event is attached using switch case in order to change the value of the state variables. In this tutorial, we are going to learn about how to redirect a user from one page to another page in react-router using Redirect component.. Suppose we have a path /blog in our app and we updated it to /tutorials so that now if any user tries to navigate to /blog we need to redirect them to /tutorials, we can do it by using a Redirect component provided by the react-router-dom library.

Conditional Rendering – React, This example renders a different greeting depending on the value of This can help you conditionally render a part of the component while the rest of the output doesn't change. function LoginButton(props) { return ( <button onClick={props. In this tutorial, we are going to learn about different ways to show or hide elements and components in react. Consider we have this component with two buttons show or hide.

Reactjs show hide component on click, How to show hide component on Click in React JS? In this examples ToggleBox component have a Show/Hide button which will Show or Hide the Different programming languages, tools, and frameworks have several ways to jump-start � But your component should probably just have state and render the component next to the button after the button was clicked. – Felix Kling Nov 21 '15 at 5:51 @FelixKling: Thanks now it make sense, you can provide the answer I can accept. – batman Nov 21 '15 at 5:52

React onClick Event Handling (With Examples), Example: Call a Function After Clicking a Button. App.js (Class Component). import React, {� A simple click handler on the button, and setting window.location.hash will do the trick, assuming that your destination is also within the app.. You can listen to the hashchange event on window, parse the URL you get, call this.setState(), and you have your own simple router, no library needed.

Comments
  • Nic, thanks a lot, but although I managed to set showMainView as false (with the help of Hannibal B. Moulvad, I don't know how to make the switch on/off for render(). I manage to display MainView, but only as additional to MovieView. Can you give me another hint?
  • @cgobbet Would it work if you added an if statement in render() based on showMainView? I.e.: if (showMainView) { return <MainView/> } else { return /* other-stuff */ }
  • thanks a million. I will do that from scratch with your hints tomorrow, when I come back to life.