score:0
i think what you need here is a component to play the middle man. you can make this middle man component a container component that holds and manipulates your state and then your other two components that you already have become stateless components. like this:
var componentone = react.createclass({
render: function() {
return (
<div>
<a href="#" classname="component-one" onclick={this.props.clickhandler}>(show full)</a>
</div>
);
}
});
var componenttwo = react.createclass({
style: function() {
return (this.props.showexample) ? {display: "inline"} : {display: "none"}
},
render: function() {
return (
<div classname="component-two" style={this.style()}>example</div>
);
}
});
var controller = react.createclass({
getinitialstate: function() {
return {property: false};
},
handlesearch: function() {
this.setstate({property: !this.state.property});
},
render: function() {
return (
<div>
<componentone clickhandler={this.handlesearch} />
<componenttwo showexample={this.state.property}/>
</div>
);
}
})
var app = react.createclass({
render: function() {
return (
<div>
<controller />
</div>
);
}
});
reactdom.render(<app />, document.getelementbyid('content'))
by the way, i thought i should mention, doing it this way you could potentially make it so that in the controller component you conditionally render componenttwo rather than using the style to hide it. i didn't want to change the styling functionality in case there was a specific reason you were doing but if there isn't then i'd say just only render component2 if you need it.
here is a fiddle of this working: http://jsfiddle.net/ozrevulsion/4rh31tou/
good luck!
Source: stackoverflow.com
Related Query
- React & how to transfer event
- How can I prevent event bubbling in nested React components on click?
- How to use onClick event on react Link component?
- React - how to capture only parent's onClick event and not children
- How to add scroll event in react component
- How can I add onKeyPress event to react material-ui textfield?
- How to set event handler in React sub-component
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to pass an event handler to a child component in React
- How to simulate mouse over event on a div using enzyme for testing a react application?
- How can I propagate touch event in nested Touchable in React Native?
- How can I handle an event to open a window in react js?
- How to attach drag event handlers to a React component using TypeScript
- How to add Event in React Functional Component
- how to get list of all registered synthetic event handlers/listeners for a React Component?
- How I can disable a button in React js for 5 seconds after click event
- How to add arguments to event handler in ES6 React when functions are bound in constructor
- How to replace a component with another one upon event (button click) in react js
- How to achieve re-useable components with React and mouse event propagation?
- How to add click event with React createElement
- React - How to Pass an Argument to an Event Handler
- Is it too expensive to add and remove event listeners on every call of my React custom hook? How to avoid it?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to Attach Drag & Drop Event Listeners to a React component
- React - how to trigger preventDefault() before the synthetic event is recycled?
- How do I programaticly navigate to a route from an event handler in React Router 4.0?
- how to write inline js event handler code in the react component using "this"
- how to use react devtools to get function tied to an onClick event listener
- How to handle mouse event in stateless component in React
- calendar Ant Design: how to show event only in specific day in month using React JS
More Query from same tag
- reactJS : isomorphic app with flux
- State is persisting when pressing back/forward on Safari browser (react-router-dom)
- How to use a connected-to-Redux-Higher-Order-Component inside a Component which is also connected to Redux
- Why GitHub Pages does not display my React Redux Todo Web aplication
- React Pass Props to a Stateless Functional Component
- React/Gatsby: Using CSS grid with alternating number of columns in each row
- React-Select: Show search bar in dropdown
- Text not aligning vertically at the center of select dropdown in material UI core
- Disable submit button if no change is done to the form
- Match who objects ObjectId to use their "matching" data
- How to write custom hook for detecting hover of several elements?
- TypeScript: Constant array as type definition
- Compressing the size of React Native apps
- Nested Array Of Objects into Downloadable CSV in react
- Warning: Each child in an array or iterator should have a unique "key" prop. React two button function conflict
- Weird Condition behaviour within ComponentDidUpdate
- React 'props' is not defined
- React Routing : How can I be redirected to matching tab according to url?
- useState and map - React
- How can I get value from TextFields and Select by click on button?
- Why is first Jest test causing second test to fail?
- implementing lazy loading of image using styled components
- how to display elements when I click on it?
- React: What is the best way to block an invalid session from accessing page
- with or without dollar sign in react
- React input binding to state vs local variable
- Nested flexbox is overflowing screen
- Retrieve the email of a user connected to an Azure App Service with Microsoft Identity
- React + Fetch+ Json. TypeError: Cannot read property of undefined
- backgroundColor and onClick Wont Take Effect React JS In Basic React App