Kevin Powell - Community•4mo ago

how to render a component by clicking in reactjs ?

I want to render a component by clicking? Here's the code I want to display that language component when I click button from that user.jsx and only render language component and disappear that user component Language.jsx

js 

import React from 'react';
export function Language({ usedetails }) {
  return <h1> Welcome {usedetails} </h1>;
}

js 

import React from 'react';
export function Language({ usedetails }) {
  return <h1> Welcome {usedetails} </h1>;
}

User.jsx

import React, { useState } from 'react';
import { Language } from './Language';

export function User() {
  const [usedetails, setUsedetails] = useState('');

  function redirect12() {
    <Language usedetails={usedetails}
}

  return (
    <div>
      <input
        type='text'
        onChange={(e) => setUsedetails(e.target.value)}
      />
      <button onClick={redirect12}>Next</button>

    </div>
  );
}

App.jsx

import React, { useState } from 'react';
import { Language } from './Language';

export function User() {
  const [usedetails, setUsedetails] = useState('');

  function redirect12() {
    <Language usedetails={usedetails}
}

  return (
    <div>
      <input
        type='text'
        onChange={(e) => setUsedetails(e.target.value)}
      />
      <button onClick={redirect12}>Next</button>

    </div>
  );
}

App.jsx

js import React from 'react'; import { User } from './User'; export function App() { return ( <div> <User /> </div> ); }

26 Replies

vagge_b•4mo ago

I can't really unferstand what you are saying but assuming you want to hide the Language comp.when clicling on the button, you can do this: Inside redirect12: const [showLang, setShowLang] = useState(true); In the button: <button onclick={()=>{setShowLang(false)}}>Next</button> And for the Language component, render it conditionally:

vicOP•4mo ago

Oh so I can use ternary operator To display between the components Oh I get it

vagge_b•4mo ago

{showLang&&<Language usedetails={usedetails}/>}

vicOP•4mo ago

{ !showLang ? Input details : <Language /> }

vagge_b•4mo ago

Yeah Yes exactly

vicOP•4mo ago

Ok thanks

vagge_b•4mo ago

And if you have many pages, you can also do this in the button: <button onClick={()=>{setCurrentPage(currentPage+1)}}>Next Page</button>

vicOP•4mo ago

If I in Language component in browser and I click back , will that state change automatically to false ??

vagge_b•4mo ago

You mean with the back button?

vicOP•4mo ago

The browser back In chrome

vagge_b•4mo ago

No, it will go to the previous url For that you would have to change the url each time you go to a next page

vicOP•4mo ago

Oh I see I get it now

vagge_b•4mo ago

It's a quite a bit more complicated

vicOP•4mo ago

But I don't understand this Do u have any articles for this Its an state function and state variable right ? UseState

vagge_b•4mo ago

Yeah

vagge_b•4mo ago

You can read more here: https://react.dev/reference/react/useState

useState – React

The library for web and native user interfaces

vagge_b•4mo ago

(About useState)

vicOP•4mo ago

Alright I Know useState but I don't understand that what u said about multiple pages and And increment+ 1

vagge_b•4mo ago

What I meant here is that if in your page you have this: const [currentPage,setCurrentPage] = useState(1); return(<div> {currentPage == 1&& <FirstPage/>} {currentPage == 2&& <SecondPage/>}{currentPage == 3&& <ThirdPage/>} </div>) You can add to yhe currentPage state to change page

vicOP•4mo ago

So I can change the state to 2,3 by using onClicks And the pages will be displayed

vagge_b•4mo ago

Yes and then adding one to current value To go to next page

vicOP•4mo ago

Nice I never knew about this

vagge_b•4mo ago

And - 1 for previous

vicOP•4mo ago

Yep thanks it would help me

vagge_b•4mo ago

But what I said above does not work with browser buttons (the ones on the left of the url) Keep that in mind

vicOP•4mo ago

Sure Yep thanks

Gaming

Programming

how to render a component by clicking in reactjs ?