getData(){
return (
<div class="firstGen" onClick={this.handleRetrive}> some elements </div>
<div class="firstGen" onClick={this.handleRetrive}> some elements </div>
<div class="firstGen" onClick={this.handleRetrive}> some elements </div>
<div class="firstGen" onClick={this.handleRetrive}> some elements </div>
);
}
handleRetrive(e) {
return( <div id="SecondGen"> some other elements </div>
);
}
render()
{
return(
<div> some elements <div id="main">{this.getData}> some text</div> </div>
);
}
/* I displayed id=main element perfectly and i just what to replace .firstGen with #SecondGen on click of .firstGen.(only the clicked element from list of all elements having class = firstGen) NOTE: cannot use state variables due to complications in my code. */
You cannot return arguments from onClick(there's nothing to catch that response).
What you'd want it to change to state inside the handleRetrive function, the state can be what HTML to show inside the render.
In any case, the flow has to be like this:
Catch onClick
Modify state.
State change will trigger the render function, Use the state to decide what to render.
You can read about conditional rendering here:
https://facebook.github.io/react/docs/conditional-rendering.html
You're not invoking the getData method. Try this.getData().
Let's say I have a Card that contains a login Form
<Card>
<LoginForm/>
</Card>
How do I access the nodes from the Form within the Card render function?
<Form >
<input type="text" name="email"/>
<input type="password" name="password"/>
<input type="submit"/>
</Form>
Because what i´d like to do is to render the submitbutton not within the props.children context but render it wrapped outside of the given child!
render () {
return (
<div className="card">
<div className="inner">
{/* render Children */}
{this.props.children != undefined ?
<div className="childrenWrapper">
{this.props.children}
</div>
: ""
}
</div>
{/* render submit from login form here, not above */
</div>)
There are some components which actually do what I want. For example the Tabs component from react-toolbox. They somehow manage to render what's within the Tab (children) somewhere else
Just for instance
<Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
<Tab label='First'><small>First Content</small></Tab>
<Tab label='Second'><small>Second Content</small></Tab>
<Tab label='Third'><small>Third Content</small></Tab>
<Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
</Tabs>
Which will lead to the following html
As you can see the children from the tab where rendered within their own section
I do not want to change anything on the Form to solve this problem, I would like to pass the Form into the Card and let the Card decide how the Form will be rendered within the card render function.
Since I'm trying to implement the Google Material Design Card component and just use it as a template there are more elements coming which will need to be split up and placed at the positions I want them to be. The thing is I could actually place the relevant HTML around the Form to get it as the Card I want it to be, but then I wouldn't need the component at all.
There are some decent answers here, but none of them directly answer your question. Therefore, even though you should refactor your code (as elucidated below), I am going to provide you a working solution:
class Card extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
console.log(typeof this.props.children)
return (
<div>
{typeof this.props.children === 'object'
? React.cloneElement(this.props.children, { ref: (n) => this.form = n })
: null}
<button onClick={(e) => console.log(this.form.data)}>submit</button>
</div>
);
}
}
class Form extends React.Component {
constructor() {
super();
this.onChange = this.onChange.bind(this);
this.state = {};
}
onChange(e) {
this.data = e.target.value;
}
render() {
return (
<form>
<input type="text" onChange={this.onChange} />
</form>
);
}
}
ReactDOM.render(
<Card><Form /></Card>,
document.getElementById('container')
);
https://jsbin.com/fohehogozo/edit?js,console,output
By setting a property on the instance, you can then access that property from children by using a ref. I checked for typeof === object here, because there was only one child.
WARNING: this code is NOT PRODUCTION READY. Do not ever run this in production. The code I have demonstrated is a terrible hack, and you should never try this at home.
If you are trying to submit a form, maybe look at passing down an onChange event and storing the value (based on the name of the field) in the state of the Card. Then attach the onChange event on the inputs so as soon as they're updated, the data will be passed back up to the container for you to submit.
If you would like to split up the childrens passed, you can simply filter the children array to split up the children, however your childrens seem to be nested.
Why dont you let the cards children handle the separation between your inner container and other content?
I think restructuring in this case is more suitable than modifying the passed children property.
Also, pulling the submit button out of the actual form tags, would break your form as it would no longer submit without some custom connection between the button and the actual form.
Don't try to manipulate the DOM; it's generally an anti-pattern in React (though there are a few valid use cases). In your case, rather than literally trying to move the elements, I'd simply hide the button in the form and add it to the parent.
Assuming you have access to the internals of <LoginForm>, you can add a prop to hide the button:
const button =
<div class="flatbuttonWrapper">
<input type="submit"/>
</div>;
<Form>
<input type="text" name="email"/>
<input type="password" name="password"/>
{!this.props.hideButton && button}
</Form>
Add the button to the Card component:
render() {
return (
<div className="card">
<div className="inner">
{this.props.children != undefined ?
<div className="childrenWrapper">
{this.props.children}
</div>
: ""
}
</div>
<div class="flatbuttonWrapper">
<input type="submit"/>
</div>
</div>
);
}
Finally, in your parent:
<Card>
<LoginForm hideButton />
</Card>
All that said, it really feels like you need to structure your code better and break some of these components up into smaller, more reusable pieces. For example, the Card component probably shouldn't be affecting the button's style or conditionally rendering children; it should just add a frame around any children. Then you can create a more complex component that composes these simpler sub-components to to whatever you need.
I have looked some answer in stackoveflow. But most of them have something todo with <table> and <tbody>. But my problem is nothing to do with that.
I render this <GISMapDropdownMenu> component using ScriptjsLoader of react-google-maps library.
initialCustomSetup: function() {
let GISMapDropdownMenu = this.refs.cornermenu;
if (googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].j.length === 0) {// push only once
googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].push(GISMapDropdownMenu);
GISMapDropdownMenu.style.zIndex = 1;
GISMapDropdownMenu.style.display = 'inline-block';
}
},
render: function() {
return(
<ScriptjsLoader
**** some setup ****
googleMapElement={
<GoogleMap
ref={googleMap => {
if (googleMap) {
googleMapInstance = googleMap;
layerType = self.props.layerType;
self.initialCustomSetup();
}
return;
}} >
<GISMapDropdownMenu
ref="cornermenu"
availableDesa={self.props.availableDesa}
availableDesaColor={self.props.availableDesaColor} />
{self.props.children}
</GoogleMap>
}
/>);
Here is the implementation of GISMapDropdownMenu.
<div className="gmnoprint GISMap-dropdownmenu" style={{display: 'none'}}>
<div>
<div ref="icon" className="GISMap-dropdownmenu--icon" onClick={this.handleIconClick}>
<img src={BurgerIcon} draggable="false" />
</div>
<div ref="content" className="GISMap-dropdownmenu--content" style={{display: 'none'}}>
<div className="GISMap-dropdownmenu--content_header">
<div className="GISMap-dropdownmenu--content_header__title">List of Desa ({number_of_desa})</div>
<div className="GISMap-dropdownmenu--content_header__cross" onClick={this.handleCrossCLick}>
<img src={CrossIcon} draggable="false" />
</div>
</div>
<div className='GISMap-dropdownmenu--content_list'>
{array_div_element_inrange_assigned_desa}
{array_div_element_inrange_desa}
{array_div_element_assigned_desa}
</div>
</div>
</div>
</div>
{array_div_element_something} is array of this.
<div key={"desa_name-"+desa.desa_name} className={"GISMap-dropdownmenu--content_list__"+desa_color.status}>Desa {desa.desa_name}</div>;
I got this error when use <GISMapDropdownMenu /> component.
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 97 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser),
I realised something:
I move the DOM of <GISMapDropdownMenu /> component after mounted. Because I need it to be in the top left of google map.
Any suggestion?
Potential problems: First off, these are guesses as I don't do React all the time, but having said that, here are some possible causes of this:
1) Unmounting components:
This probably means that setState is being called in a callback that was firing after the component that initially started the request has already been unmounted from the dom.
More details on this type of error
2) Having incomplete HTML tags in your markup
For example, adding a <p> tag without the closing </p>. The browser likes all html tags to be complete, so if it doesn't see an end tag for something, it'll add it. Try getting the HTML of your resulting component and comparing it to what you expect. Also remove the child components bit by bit (e.g. remove ) to see when it starts to work so you know what causes this problem. Your html from what I can see doesn't cause this.
3) Build your child components before rendering
Maybe you need to do as this similar answer does
4) Changing the DOM using something other than React
Is your page using jquery or something to change this component in anyway? ie bind events or add/remove anything? If so, this can be causing that as well. Try disabling this and see if it solves the problem
If none of the above help, I'd suggest adding a JSFiddle so people can see what the problem is for sure.
How can I use comments inside the render method in a React component?
I have the following component:
'use strict';
var React = require('react'),
Button = require('./button'),
UnorderedList = require('./unordered-list');
class Dropdown extends React.Component{
constructor(props) {
super(props);
}
handleClick() {
alert('I am click here');
}
render() {
return (
<div className="dropdown">
// whenClicked is a property not an event, per se.
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
)
}
}
module.exports = Dropdown;
My comments are showing up in the UI.
What would be the right approach to apply single and multiple line comments inside a render method of a component?
Within the render method comments are allowed, but in order to use them within JSX, you have to wrap them in braces and use multi-line style comments.
<div className="dropdown">
{/* whenClicked is a property not an event, per se. */}
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
You can read more about how comments work in JSX here.
Here is another approach that allows you to use // to include comments:
return (
<div>
<div>
{
// Your comment goes in here.
}
</div>
{
// Note that comments using this style must be wrapped in curly braces!
}
</div>
);
The catch here is you cannot include a one-line comment using this approach. For example, this does not work:
{// your comment cannot be like this}
because the closing bracket } is considered to be part of the comment and is thus ignored, which throws an error.
On the other hand, the following is a valid comment, pulled directly from a working application:
render () {
return <DeleteResourceButton
// Confirm
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
Apparantly, when inside the angle brackets of a JSX element, the // syntax is valid, but the {/**/} is invalid. The following breaks:
render () {
return <DeleteResourceButton
{/* Confirm */}
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
Besides the other answers, it's also possible to use single line comments just before and after the JSX begines or ends. Here is a complete summary:
Valid
(
// this is a valid comment
<div>
...
</div>
// this is also a valid comment
/* this is also valid */
)
If we were to use comments inside the JSX rendering logic:
(
<div>
{/* <h1>Valid comment</h1> */}
</div>
)
When declaring props single line comments can be used:
(
<div
className="content" /* valid comment */
onClick={() => {}} // valid comment
>
...
</div>
)
Invalid
When using single line or multiline comments inside the JSX without wrapping them in { }, the comment will be rendered to the UI:
(
<div>
// invalid comment, renders in the UI
</div>
)
According to the official site, these are the two ways:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
Second example:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
Here is the reference: How can I write comments in JSX?
To summarize, JSX doesn't support comments, either html-like or js-like:
<div>
/* This will be rendered as text */
// as well as this
<!-- While this will cause compilation failure -->
</div>
and the only way to add comments "in" JSX is actually to escape into JS and comment in there:
<div>
{/* This won't be rendered */}
{// just be sure that your closing bracket is out of comment
}
</div>
if you don't want to make some nonsense like
<div style={{display:'none'}}>
actually, there are other stupid ways to add "comments"
but cluttering your DOM is not a good idea
</div>
Finally, if you do want to create a comment node via React, you have to go much fancier, check out this answer.
Two ways to add comments in React Native
// (double forward slash) is used to comment only a single line in React Native code, but it can only be used outside of the render block. If you want to comment in a render block where we use JSX, you need to use the second method.
If you want to comment on something in JSX you need to use JavaScript comments inside of curly braces like {/* Comment here /}. It is a regular / Block comment */, but it needs to be wrapped in curly braces.
Shortcut keys for /* Block comments */:
Ctrl + / on Windows and Linux.
Cmd + / on macOS.
This is how.
Valid:
...
render() {
return (
<p>
{/* This is a comment, one line */}
{// This is a block
// yoohoo
// ...
}
{/* This is a block
yoohoo
...
*/
}
</p>
)
}
...
Invalid:
...
render() {
return (
<p>
{// This is not a comment! oops! }
{//
Invalid comment
//}
</p>
)
}
...
{/*
<Header />
<Content />
<MapList />
<HelloWorld />
*/}
JSX Comments Syntax:
You can use
{/**
your comment
in multiple lines
for documentation
**/}
or
{/*
your comment
in multiple lines
*/}
for multiple lines comment.
And also,
{
//your comment
}
for single line comment.
Note: The syntax:
{ //your comment }
doesn't work. You need to type braces in new lines.
Curly braces are used to distinguish between JSX and JavaScript in a React component.
Inside curly braces, we use JavaScript comment syntax.
Reference: click here
According to React's Documentation, you can write comments in JSX like so:
One-line Comment:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
Multi-line Comments:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
{
// Any valid JavaScript expression
}
If you wonder why it works, it's because everything that's inside curly braces { } is a JavaScript expression.
So this is fine as well:
{ /*
Yet another JavaScript expression
*/ }
JavaScript comments in JSX get parsed as text and show up in your application.
You can’t just use HTML comments inside of JSX because it treats them as DOM nodes:
render() {
return (
<div>
<!-- This doesn't work! -->
</div>
)
}
JSX comments for single line and multiline comments follows the convention
Single line comment:
{/* A JSX comment */}
Multiline comments:
{/*
Multi
line
comment
*/}
Conditional rendering
This approach mentioned on the React docs will also work with nested /**/ comments, unlike the {/**/} approach, e.g.:
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
</>}
Full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, World!</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.14.7/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
before
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
<div>
Also commented out.
/* Anything goes. */
</div>
</>}
after
</div>
,
document.getElementById('root')
);
</script>
</body>
</html>
renders just beforeafter.
Ah, just noticed, one downside of this is that linters like typescript could complain about stuff in the "comment" that is not correct.
Here are 6 ways of commenting in React:
Multi-line TypeScript comment
HTML Attribute comment
Single line JSX comment
Single-line JSX comment
Multi-line JSX comment
Single-line JavaScript comment
/**
* 1. Multi-line
* TypeScript comment
* #constructor
*/
export const GoodQuote = observer(({model} : { model: HomeModel }) => {
console.log(model.selectedIndex)
return useObserver(() =>
<div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}>
<p>{model.quotes[model.selectedIndex]}</p>
{
// 3. Single-line comment
}
{ /* 4. True Single-line comment */}
{ /*
5. Multi-line
React comment
*/ }
</div> // 6. Javascript style comment
)
})
If I have a render method in ReactJS component like this:
render: function() {
return <div>
<span>some text here</span>
</div>;
}
It ends up rendering some extra spans inside. How can I get rid of these?
It seems that any space between some block is causing this problem. For example:
<div> {foo} </div>
Will be rendered into:
<div><span/>{foo}<span/></div>
It didn't help to use parenthesis to wrap them, maybe because somewhere in my call from a parent component I am not using them.
The solution is to wrap your return in parens:
render: function() {
return (
<div>
<span>some text here</span>
</div>
);
}
Not only is it more readable but it also indicates to ReactJS to ignore the whitespace which allows you to format things as you wish.