I have a render() function that returns a div with content inside of it, such as:
return(
<div style={{background: "black"}}>
<[ReactComponent]>
<[AnotherReactComponent]>
...
</[AnotherReactComponent]>
</[ReactComponent]>
</div>
);
When I inspect the element, the outer div does not render, however the ReactComponent does.
maybe you should add some construction like this in the render method of RComponent
<View>{props.children}</View>
Related
I am very new to react and JavaScript and this is my second week of react learning. I am now stuck with the event propagation problem. I have tried to access onClick in the child of <React.Fragment> but event target is seem to be in <React.Fragment> itself. I can not find the simple solution. Please help, Thank you very much in advance.
return (
{loading ? ("...loading...") : data.map(({id,project_title,project_subtitle, project_description,image_url,link},index) => (
<React.Fragment>
<ProjectListButton onClick={(e)=>{ alert(index)}} id={"b"+id} project_title={project_title} project_subtitle={project_subtitle} />
<ProjectPlate project_description = {project_description} image_url ={image_url} link ={link} />
</React.Fragment>
)
)
}
)
<React.Fragment>
is wrapper, to wrap the html elements or sibling elements. It acts as a sudo parent and it just wraps them.
We can't add any attributes to the react fragment.
If you want to capture events, replace fragments with div and add a listener on it. It is not required to use fragment. It is just an option to save an extra element, if we just need them for wrapping purpose.
I created Carousel component, it returns a collection of carousel boxes, before returning it I am applying style property to every returning div, but the style is not working. What should I do to fix it?
If I created another div inside the main div and wrap the content of outer div into inner div, and apply style property to inner div
instead to outer div then everything is working.
const Carousel = (props)=>{
return (
<Slider {...settings}>
{ props.sectionDetails?
props.sectionDetails.map(
(TypeBox)=>{
return (<div key={TypeBox.id} style={{background:
TypeBox.background_color}}>
<h3>{TypeBox.title}</h3>
<p>{TypeBox.description}</p>
</div>
);
}):"" }
</Slider>
);
}
I want only one div and style should work with this, I don't want to create another nested div.
Inline styles in React is a similar with JSON.
The style element must be writen together with camelCase.
The Value of the style element must be wraped in quotes.
I don't know will it work with you'r code, but try this anyway, this is the right way to call inline style:
style={{backgroundColor: "TypeBox.background_color"}}
Or You can try to wrap Your style into backticks like this:
style={{backgroundColor: `${TypeBox.background_color}`}}
The correct solution is style={{ backgroundColor: TypeBox.background_color }}.
I have multiple elements with same className and i want if some element (with className history-node) is clicked it should get className active along with current className.
But i am having an issue, there are childs of that element and if child elements gets clicked they also get class Active.
Here is the code:
<div className="history-node-container" key={index}>
<div className="history-node" onClick={(e) => {this.handleHistoryClick(e.target)}}>
<span className="history-title">{heading.action}</span>
<span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
</div>
</div>
handleHistoryClick function
handleHistoryClick(target){
$('.history-node').removeClass('active'); //removing active class from all elements
target.className = 'history-node active';
}
I want to run function when user click on element with className history-node
But if user clicks on history-title, ClickHandler gives class active to history-title element.
EXPECTED BEHAVIOUR: if history-node is clicked only history-node should get class active.
One tip and how to solve your problem (In two ways)
Tip: Not usually the best idea to mix React with jQuery. React came in as a major paradigm shift in how we interact with the DOM. Try to read a little bit more about React, how it works, why is it so different from simply adding/removing elements in the DOM with jQ.
Some references to help you with that:
How to go from jQuery to React.js?
Thinking in React for jQuery Programmers
Now, back to your question
You should use currentTarget.
As the .history-title and .history-date elements are wrapped within .history-node, any click on them will trigger it's parent's event, since .history-node body is .history-title + .history-date. That's the correct behavior. When you trigger an event in JS, the event object receives two parameters: target, which is the event triggering the event and currentTarget, the element that is actually listening for the event.
Now for the code:
with JQ
Component:
<div className="history-node-container" key={index}>
<div className="history-node" onClick={handleHistoryClick}>
<span className="history-title">{heading.action}</span>
<span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
</div>
</div>
Click:
handleHistoryClick(event){
$('.history-node').removeClass('active')
event.currentTarget.classList.add('active')
}
The React way (Pure React, no modules)
Component:
class HistoryNode extends Component {
constructor(props) {
super(props)
this.state = { isActive: false }
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
let state = this.state
this.setState({isActive: !state.isActive})
}
render() {
return(
<div className="history-node-container">
<div className={`history-node ${this.state.isActive ? 'active' : ''}`} onClick={handleHistoryClick}>
<span className="history-title">{heading.action}</span>
<span className="history-date">
{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
</div>
</div>
)
}
}
Notice how you don't need to manipulate the DOM at any moment at the React solution. You just attach your event to that particular component, define how it's state change should reflect on the UI and let React do the rest.
Hope it helps ;)
Reference for target vs currentTarget
I think the event propagates to child components.
Have you tried this ?
<div className="history-node-container" key={index}>
<div className="history-node" onClick={handleHistoryClick}>
<span className="history-title">{heading.action}</span>
<span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
</div>
</div>
HandleClick function
handleHistoryClick(event){
event.stopPropagation();
$('.history-node').removeClass('active');
event.target.className = 'history-node active';
}
EDIT : You could make it simpler though (and without jQuery) using your component state. But without knowing how you wrote your component I cannot give you a snippet illustrating it. Be careful too as you interact directly with the DOM, this implies a performance loss. Using the React state allows you to avoid such thing!
First off I did look at all the related answers but none solved my problem. I have the following:
class TweetingBox extends React.Component{
render(){
return (
<div id="page-blackout" onClick={this.props.closeTweetingInterface}>
<div id="tweeting-box" onClick={(proxy) => {proxy.stopPropogation()}}>
<h5 id="tweeting-box-header">Compose new Tweet</h5>
<TweetingInterface initialContent={this.props.initialContent}/>
</div>
</div>
)
}
}
div with id="page-blackout" covers the entire page and div with id="tweeting-box" is centered on the page, containing a form in the component TweetingInterface. When I click anywhere, both in the form as well as on tweeting-box itself, this.props.closeTweetingInterface is called. How can I stop this?
All the sibling elements will get their parents property, so the parent function will get called closeTweetingInterface every time the parent or the sibling elements get called on.
I'm trying to use react nested elements here, but am I unable to render the third element. The first two react sub-elements work perfectly but the second nested element doesn't render? Why is that so? How should I fix this?
var Nested=React.createClass({
render: function(){
return(
<div className="second">nested div</div>
)
}
});
var Component=React.createClass({
render: function(){
return(
<div className={this.props.className}>
<Nested>
<Nested/> //this doesn't want to render
</Nested>
<Nested/>
</div>
);
}
});
ReactDOM.render(
<div>
<Component/>
</div>,
document.getElementById("app"));
If you want a custom component to render nested components or elements, using {this.props.children} in your custom component's render method will allow you to do that.