CODEWITHSUNDEEP
javascripthtmlcssreactjs
Aashish Kumar
Aashish Kumar

Reputation: 1006

react button component not visible on output screen , But showing in inspect mode

I m making a simple react page, In which I m using css also. In output of page one component i.e h1 is visible on screen , but button component is not visible on screen . I attached a screen shot below . enter image description here

here 's my App.js code:

import "./App.css";
const App=()=> {


  var val="thapa technical";
 
    return(
    <div>
<h1 className="App-header">{val} </h1>   
<button className="medium">click me </button>
    </div>
  );
}

export default App;

Here's my App.css file :

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
h1{
  font-size:3rem;
  text-transform:capitalize;
}
button {
  background: red;
  border-radius: 8px;
  color: white;
}
.medium {
  height: 50px;
  width: 100px;
}

Here's my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
    
  </React.StrictMode>,
  document.getElementById('root')
);

Upvotes: 1

Views: 1297

Answers (2)

Aashish Kumar
Aashish Kumar

Reputation: 1006

just fix your App.js as file as shown below:

import React,{useState} from "react";
import "./App.css";
const App=()=> {


  // var  val="thapa technical";

  const [myName,setMyName]=useState('Radhe Radhe');
  const changeName=()=>{

//     val="vinod thapa ";
// console.log(val);
if(myName==="Radhe Radhe")
  setMyName("aditya Gujjar")
else
{
  setMyName("Radhe Radhe");
}  
  }

  // console.log(myName);
  // console.log(useState());
 


    return(
    <div className="App-header">
<h1 >{myName} </h1>   
<button className="medium" onClick={changeName}>click me </button>
    </div>
  );
}

export default App;

use App-header class in div tag , not in h1 tag . Also i make some changes in logical part , don't take it seriously , it's an updation according to my requirement . main problem is solved by just putting App-header class in div tag .

Upvotes: 1

T J
T J

Reputation: 43156

The problem is that your <h1> has 100vh. So it pushes the button outside the viewport. You can add a class to the parent div and apply the height, background etc to it in order to display both children in view port.

.App-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #282c34;
}

Fixed sandbox:

Edit angry-wescoff-18eyg

Upvotes: 2

Related Questions