Sidebar DOM overlaps Navbar, removing it from the DOM
up vote
2
down vote
favorite
Hi im using React to create a sidebar when the user clicks on a burger menu, the problem is when the user clicks on the burger menu, the sidebar appears but the navbar disappears, how do I render both the navbar and the sidebar without overlaying one another?
var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>
As the snipped shows, if you click on the broken image link my form will overwrite the todolist navbar.
Many thanks for the constructive help :)
javascript html css reactjs jsx
asked Nov 19 at 13:06
Ben Swindells
1829
add a comment |
up vote
2
down vote
favorite
Hi im using React to create a sidebar when the user clicks on a burger menu, the problem is when the user clicks on the burger menu, the sidebar appears but the navbar disappears, how do I render both the navbar and the sidebar without overlaying one another?
var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>
As the snipped shows, if you click on the broken image link my form will overwrite the todolist navbar.
Many thanks for the constructive help :)
javascript html css reactjs jsx
asked Nov 19 at 13:06
Ben Swindells
1829
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Hi im using React to create a sidebar when the user clicks on a burger menu, the problem is when the user clicks on the burger menu, the sidebar appears but the navbar disappears, how do I render both the navbar and the sidebar without overlaying one another?
var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>
As the snipped shows, if you click on the broken image link my form will overwrite the todolist navbar.
Many thanks for the constructive help :)
javascript html css reactjs jsx
asked Nov 19 at 13:06
Ben Swindells
1829
Hi im using React to create a sidebar when the user clicks on a burger menu, the problem is when the user clicks on the burger menu, the sidebar appears but the navbar disappears, how do I render both the navbar and the sidebar without overlaying one another?
var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>
As the snipped shows, if you click on the broken image link my form will overwrite the todolist navbar.
Many thanks for the constructive help :)
var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);var app = document.getElementById('app');
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOn: false
};
this.onClickOpen = this.onClickOpen.bind(this);
}
onClickOpen(open) {
console.log(open);
if(open) {
this.setState({sidebarOn: open});
Menu();
}
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
</nav>
</header>
</div>
);
}
}
function Menu() {
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Parent />, app);
}
ReactDOM.render(<Navbar />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="/js/app.js"></script>
</body>
</html>javascript html css reactjs jsx
javascript html css reactjs jsx
asked Nov 19 at 13:06
Ben Swindells
1829
asked Nov 19 at 13:06
Ben Swindells
1829
edited Nov 19 at 13:12
asked Nov 19 at 13:06
Ben Swindells
1829
asked Nov 19 at 13:06
Ben Swindells
1829
asked Nov 19 at 13:06
Ben Swindells
1829
1829
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
the problem is that when you want to render the sidebar menu you are using this code
ReactDOM.render(<Parent />, app);
it means that just insert what ever the component is inside of app element in your html file. the result would be like wiping out the previously rendered component and the render the new one. so that is what you see right here:
...some code
}
}
ReactDOM.render(<Parent />, app); <---- here
}
ReactDOM.render(<Navbar />, app); <---- and here
... morecode
you dont need to render what every component you just created inside of root element directly. you only need to render the most upper component ONCE in it
all of other components should be nested within the parent one, by that way you only would render one parent component inside of the root element from html file and all other components would be included in it by importing them inside your parent component and using them there, like below:
import React from 'react'
import ReactDOM from 'react-dom'
import B from './B'
class A extends React.component {
render() {
return(
<div>
<B />
</div>
)
}
}
ReactDOM.render(
<A />,
document.querySelector('#app')
)
answered Nov 19 at 13:23
a_m_dev
1,14031227
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
add a comment |
up vote
0
down vote
accepted
I was able to fix my Question by the help from a_m_dev then added a conditional statement to check if the class was open or not, like so:
class App extends React.Component {
render() {
return(
<div>
<Navbar/>
</div>
);
}
}
class Navbar extends React.Component {
constructor() {
super();
this.state = {
burgerOn: false
}
}
clickHandler(open) {
this.setState({burgerOn: open});
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
</nav>
</header>
<div>
{this.state.burgerOn ? <Parent/> : null}
</div>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, app);
I hope this helps someone with the same issue :)
answered Nov 19 at 15:41
Ben Swindells
1829
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
the problem is that when you want to render the sidebar menu you are using this code
ReactDOM.render(<Parent />, app);
it means that just insert what ever the component is inside of app element in your html file. the result would be like wiping out the previously rendered component and the render the new one. so that is what you see right here:
...some code
}
}
ReactDOM.render(<Parent />, app); <---- here
}
ReactDOM.render(<Navbar />, app); <---- and here
... morecode
you dont need to render what every component you just created inside of root element directly. you only need to render the most upper component ONCE in it
all of other components should be nested within the parent one, by that way you only would render one parent component inside of the root element from html file and all other components would be included in it by importing them inside your parent component and using them there, like below:
import React from 'react'
import ReactDOM from 'react-dom'
import B from './B'
class A extends React.component {
render() {
return(
<div>
<B />
</div>
)
}
}
ReactDOM.render(
<A />,
document.querySelector('#app')
)
answered Nov 19 at 13:23
a_m_dev
1,14031227
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
add a comment |
up vote
1
down vote
the problem is that when you want to render the sidebar menu you are using this code
ReactDOM.render(<Parent />, app);
it means that just insert what ever the component is inside of app element in your html file. the result would be like wiping out the previously rendered component and the render the new one. so that is what you see right here:
...some code
}
}
ReactDOM.render(<Parent />, app); <---- here
}
ReactDOM.render(<Navbar />, app); <---- and here
... morecode
you dont need to render what every component you just created inside of root element directly. you only need to render the most upper component ONCE in it
all of other components should be nested within the parent one, by that way you only would render one parent component inside of the root element from html file and all other components would be included in it by importing them inside your parent component and using them there, like below:
import React from 'react'
import ReactDOM from 'react-dom'
import B from './B'
class A extends React.component {
render() {
return(
<div>
<B />
</div>
)
}
}
ReactDOM.render(
<A />,
document.querySelector('#app')
)
answered Nov 19 at 13:23
a_m_dev
1,14031227
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
add a comment |
up vote
1
down vote
up vote
1
down vote
the problem is that when you want to render the sidebar menu you are using this code
ReactDOM.render(<Parent />, app);
it means that just insert what ever the component is inside of app element in your html file. the result would be like wiping out the previously rendered component and the render the new one. so that is what you see right here:
...some code
}
}
ReactDOM.render(<Parent />, app); <---- here
}
ReactDOM.render(<Navbar />, app); <---- and here
... morecode
you dont need to render what every component you just created inside of root element directly. you only need to render the most upper component ONCE in it
all of other components should be nested within the parent one, by that way you only would render one parent component inside of the root element from html file and all other components would be included in it by importing them inside your parent component and using them there, like below:
import React from 'react'
import ReactDOM from 'react-dom'
import B from './B'
class A extends React.component {
render() {
return(
<div>
<B />
</div>
)
}
}
ReactDOM.render(
<A />,
document.querySelector('#app')
)
answered Nov 19 at 13:23
a_m_dev
1,14031227
the problem is that when you want to render the sidebar menu you are using this code
ReactDOM.render(<Parent />, app);
it means that just insert what ever the component is inside of app element in your html file. the result would be like wiping out the previously rendered component and the render the new one. so that is what you see right here:
...some code
}
}
ReactDOM.render(<Parent />, app); <---- here
}
ReactDOM.render(<Navbar />, app); <---- and here
... morecode
you dont need to render what every component you just created inside of root element directly. you only need to render the most upper component ONCE in it
all of other components should be nested within the parent one, by that way you only would render one parent component inside of the root element from html file and all other components would be included in it by importing them inside your parent component and using them there, like below:
import React from 'react'
import ReactDOM from 'react-dom'
import B from './B'
class A extends React.component {
render() {
return(
<div>
<B />
</div>
)
}
}
ReactDOM.render(
<A />,
document.querySelector('#app')
)
answered Nov 19 at 13:23
a_m_dev
1,14031227
answered Nov 19 at 13:23
a_m_dev
1,14031227
answered Nov 19 at 13:23
a_m_dev
1,14031227
answered Nov 19 at 13:23
a_m_dev
1,14031227
1,14031227
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
add a comment |
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
Hmm I see, makes sense, so would that mean I need to place Parent class into another JS file then import it into app.js then nest it inside my Navbar class?
– Ben Swindells
Nov 19 at 13:30
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
No , you need to create a parent component to hold the child ones. which means that you need to import child components into your parent component and then render it, as time goes by your child components would hold more child components that would structure your app
– a_m_dev
Nov 19 at 14:35
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
Ok I have done that and it works well but I still cant seem to get it to work with onClick, from the global parent class, so ive structured it as you've said, it reveals both the navbar and sidebar but I need to have the sidebar show on a click handler like in my code! :)
– Ben Swindells
Nov 19 at 14:48
add a comment |
up vote
0
down vote
accepted
I was able to fix my Question by the help from a_m_dev then added a conditional statement to check if the class was open or not, like so:
class App extends React.Component {
render() {
return(
<div>
<Navbar/>
</div>
);
}
}
class Navbar extends React.Component {
constructor() {
super();
this.state = {
burgerOn: false
}
}
clickHandler(open) {
this.setState({burgerOn: open});
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
</nav>
</header>
<div>
{this.state.burgerOn ? <Parent/> : null}
</div>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, app);
I hope this helps someone with the same issue :)
answered Nov 19 at 15:41
Ben Swindells
1829
add a comment |
up vote
0
down vote
accepted
I was able to fix my Question by the help from a_m_dev then added a conditional statement to check if the class was open or not, like so:
class App extends React.Component {
render() {
return(
<div>
<Navbar/>
</div>
);
}
}
class Navbar extends React.Component {
constructor() {
super();
this.state = {
burgerOn: false
}
}
clickHandler(open) {
this.setState({burgerOn: open});
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
</nav>
</header>
<div>
{this.state.burgerOn ? <Parent/> : null}
</div>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, app);
I hope this helps someone with the same issue :)
answered Nov 19 at 15:41
Ben Swindells
1829
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
I was able to fix my Question by the help from a_m_dev then added a conditional statement to check if the class was open or not, like so:
class App extends React.Component {
render() {
return(
<div>
<Navbar/>
</div>
);
}
}
class Navbar extends React.Component {
constructor() {
super();
this.state = {
burgerOn: false
}
}
clickHandler(open) {
this.setState({burgerOn: open});
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
</nav>
</header>
<div>
{this.state.burgerOn ? <Parent/> : null}
</div>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, app);
I hope this helps someone with the same issue :)
answered Nov 19 at 15:41
Ben Swindells
1829
I was able to fix my Question by the help from a_m_dev then added a conditional statement to check if the class was open or not, like so:
class App extends React.Component {
render() {
return(
<div>
<Navbar/>
</div>
);
}
}
class Navbar extends React.Component {
constructor() {
super();
this.state = {
burgerOn: false
}
}
clickHandler(open) {
this.setState({burgerOn: open});
}
render() {
return(
<div>
<header>
<nav class="navbar navbar-custom sticky-top">
<a class="navbar-brand" href="#">TO DO LIST</a>
<a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
</nav>
</header>
<div>
{this.state.burgerOn ? <Parent/> : null}
</div>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
burgerOn: "burger-right"
};
}
render() {
return (
<div class={this.state.burgerOn}>
<div class="container">
<form >
<div class="form-group task-title">
<label for="title">
Task Title
</label>
<input type="title" class="form-control" placeholder="Enter Task Title"></input>
</div>
<div class="form-group task-desc">
<label for="desc">Task Description</label>
<textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
</div>
</form>
<div>
<button type="button" class=" task-btn btn btn-primary">Create</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, app);
I hope this helps someone with the same issue :)
answered Nov 19 at 15:41
Ben Swindells
1829
answered Nov 19 at 15:41
Ben Swindells
1829
answered Nov 19 at 15:41
Ben Swindells
1829
answered Nov 19 at 15:41
Ben Swindells
1829
1829
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375329%2fsidebar-dom-overlaps-navbar-removing-it-from-the-dom%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
