I have finished code a welcome box and that can be closed by clicking the button. This welcome is just a part of the page, now, I want to add cookie in this component, in order to achieve this welcome box will show up for only once for each browser.
I am newbie for cookie, any suggestion will help me.
var Child = React.createClass({
render: function() {
return (
<div className="container">
<p>Welcome to our website</p>
<button onClick={this.props.onClick}>close me</button>
</div>
);
}
});
var ShowHide = React.createClass({
getInitialState: function () {
return { childVisible: true };
},
render: function() {
return(
<div>
{
this.state.childVisible
? <Child onClick={this.onClick} />
: null
}
</div>
)
},
onClick: function() {
this.setState({childVisible: !this.state.childVisible});
}
});
React.render(<ShowHide />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
You can visit following link. You need to import react-cookie
How can I do to set cookie in the react code?
Related
Is there a way to achieve conditionally rendered content below but instead of using {renderAuthButton()} in the return statement, I want to achieve running renderAuthButton() with onCLick instead?
class App extends Component {
// ...
render() {
let {isLoggedIn} = this.state;
const renderAuthButton = () => {
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
}
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
{renderAuthButton()}
</div>
);
}
}
I don't really understand your need but to render conditionally, you can do something like that
state = {
show: false,
}
<div className="App">
<button onClick={() => this.setState((prev) => { show: !prev.show })}>Toggle</button>
{this.state.show && <MyComponent />}
</div>
I'm not completely sure what you're trying to do but this is how you would conditionally render content in react:
class App extends React.Component {
constructor(props){
super(props);
this.state = {
show: false
}
this.toggleShow = this.toggleShow.bind(this);
}
toggleShow(){
this.setState({show: ! this.state.show})
}
render(){
return (
<div>
<button onClick={this.toggleShow}>Filter Content</button>
{this.state.show ? (
<p>This content is conditionally shown</p>
) : (
<p>The content is now hidden</p>
)}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I am trying to make a modal reusable:
this is my component:
class OverleyModal extends Component {
constructor(props) {
super(props);
}
openModal = () => {
document.getElementById("myOverlay").style.display = "block";
}
closeModal = () => {
document.getElementById("myOverlay").style.display = "none";
}
render() {
return (
<React.Fragment>
<div id="myOverlay" className="overlay">
<div className="overlay-content">
<p>content goes there</p>
</div>
</div>
</React.Fragment>
)
}
}
export default OverleyModal;
The above component is working great for the purpose of modal, that is why i didn't include here CSS/style, the issue not about CSS.
I want, when i mount this component on any compoenet like thise below:
<overleyModal open={true} />
if open=true, the modal will be visiable
<overleyModal open={false} />
and if open={false}
the modal will disappear
You can see how i deal open and close modal in the coponent method openModal() and closeModal()
But i am going through the trouble to make it reliable, I just want to use open as props, nothing else. if open is true, it will appear and if false, it will disappear.
Can anyone please help me in this case?
You need to make use of props and control the opening and closing through it by conditionally rendering it. You can also make the content generic by passing it as props too
class OverlayModal extends Component {
render() {
const { open, content } = this.props
return open? <React.Fragment>
<div id="myOverlay" className="overlay">
<div className="overlay-content">
<p>{content}</p>
</div>
</div>
</React.Fragment>: null
}
}
export default OverlayModal;
and use it like
<OverlayModal open={true} content={content goes there'} />
or even better you can define the content as children to give you more styling options
class OverlayModal extends Component {
render() {
const { open, children} = this.props
return open? <React.Fragment>
<div id="myOverlay" className="overlay">
<div className="overlay-content">
{children}
</div>
</div>
</React.Fragment>: null
}
}
export default OverlayModal;
and using as
<OverlayModal open={true} ><p>content goes there</p></OverlayModal >
open can be a property value and modal can be rendered conditionally based on the prop value. There is no need to directly access dom element.
return props.open ? (
<div id="myOverlay" className="overlay">
<div className="overlay-content">
<p>content goes there</p>
</div>
</div>
) : null;
I am trying to make Button to Increment a value in React.js to learn communication between two components. One Component is just a Button showing +1 and other component is a Value that will be incremented on Click of that button.
I have written this code but not able to find why value is not being displayed.
Note: I have just one day of experience in React.js.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
<script type="text/babel">
var Button = React.createClass({
render : function(){
return (
<button>+1</button>
)
}
});
var Counter = React.createClass({
render : function(){
return (<div>Hello {this.props.updValue}</div>);
}
});
var App = React.createClass({
getInitialState : function(){
return {count : 0 };
},
increment : function(){
this.setState({counter:this.state.count + 1});
},
render: function(){
return (
<div>
<Button onClick={this.increment} updValue={this.state.count}/>
<Counter />
</div>
);
}
});
ReactDOM.render(<App />,document.getElementById("root"));
</script>
</body>
</html>
( https://plnkr.co/edit/SVTfEc5jx5Q15B1c07GB )
EDIT: After learning from Piotr Berebecki's code I have modified existing code to add by the value on which Click has been made.
https://plnkr.co/edit/VL5961FB0mrm4QlxuO9T
Please check out this demo: http://codepen.io/PiotrBerebecki/pen/NRdAON and the React code below.
The problems that I've noticed in your code:
In the increment() function you used
this.setState({counter:this.state.count + 1}); and it should be this.setState({count:this.state.count + 1});
In the App render method you used the onClick event. This should be in the render method of the Button component itself.
You also need a prop (which I named for clarity reasons passClick) passed from parent (App) to a child (Button). The Button can then use this prop in its handleClick() method. This will be then received by the App invoking the increment() method.
React code:
var Button = React.createClass({
handleClick: function() {
console.log('1. Received click in Button');
this.props.passClick();
},
render: function() {
return (
<button onClick={this.handleClick} >+1</button>
)
}
});
var Counter = React.createClass({
render: function() {
return (<div>Hello {this.props.updValue}</div>);
}
});
var App = React.createClass({
getInitialState: function() {
return {
count: 0
};
},
increment: function() {
this.setState({
count: this.state.count + 1
});
console.log('2. Received click in App');
},
render: function() {
return (
<div>
<Button passClick={this.increment}/>
<Counter updValue={this.state.count}/>
</div>
);
}
});
I want to create a clean & reusable Modal-component like so:
var Modal = React.createClass({
....
render: function() {
return (
<div className={ this.state.className }>
<div className="modal-opacity" onClick={this.toggle}></div>
<section className="modal-content">
<a className="close" onClick={this.toggle}><img src="/images/icon-close.svg" alt="Close" /></a>
<div>
{this.props.module === 'curriculum' ? <Curriculum /> : <Contact /> }
</div>
</section>
</div>
);
To keep it neat — I'd would like to load the modal-content as a Component based on the {this.props.module} value, that is coming from the initiator component.
Is there a better way of doing this? Something like <{this.props.module}/>? Or is this insecure? Maybe there's is already something in ReactJS built-in?
You can use this.props.children to render component's child controls. Like this:
var Control = React.createClass({
render: function() {
return <div>{ this.props.children }</div>;
}
});
var App = React.createClass({
render: function() {
return <Control><h1>child control</h1></Control>;
}
});
I just started with the official React tutorial and I seem to be stumbling upon an error that prevents the browser from showing the content, it's probably some stupid typo, but I can't seem to find it. In the var CommentBox when I remove <CommentList /> and <CommentForm />, only the element <h1>Comments</h1> appears, but when I add them nothing appears in the browser, even the <h1>Comments</h1>. What am I overlooking, any ideas? Thanks!
My code
<div id="content"></div>
<script type="text/jsx">
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
</script>
You need to move your var declaration of "CommentList" and "CommentForm" to the top of the script tag, above "CommentBox". Because in javascript there are hoisting. I put an example in github: https://github.com/josemato/stackoverflow/blob/master/reactjs-tutorial/index.html