score:3
you render both components, the right and left and you put an if condition inside state.
header component render method
render() {
const { leftorright } = this.props // right - true, left - false
return(
...
{ leftorright ? <righticon /> : <lefticon />}
);
}
inside component that calls header
import header from './somepath ...';
class something extends react.component {
this.state = { leftorright }
render() {
return(
<header leftorright = {this.state.leftorright}/>
);
}
}
you could have a function that sets leftorright
in your parent class
score:0
one way to do this is write a header component and pass all the things, as props, which you can then access them in header components props like..
<header title="headertitle"
leftbuttontitle="leftbutton"
rightbutton={canbeaobjectwithsomeinfo}
leftbuttonclick={handleclick} />
and then in your header component(can be class or a function)
const header = ({}) => (
<view>
<view onpress={this.props.handleclick}>{this.props.leftbutton}</view>
<view>{this.props.title}</view>
<view onpress={this.props.handlerightclick}>{this.props.rightbutton}</view>
</view>
)
something like this you can have and then you can design header accordingly
score:2
i guess you can always use a render prop that way you can not only decide whether to render left/right
icon component but the component rendering the icon does not even have to know what to render:
the term “render prop” refers to a simple technique for sharing code between react components using a prop whose value is a function.
return (
<view style={styles.container}>
<header
headertext={"barcode scanner"}
renderrighticon={() => (
<touchablehighlight righticon>
<ionicons name="md-barcode" size={36} color="white" />
</touchablehighlight>
)}
/>
</view>
);
then you can use call the right icon as a function:
return (
<view style={viewstyle}>
<text style={textstyle}>{this.props.headertext}</text>
{renderlefticon && (
<view style={leftbutton}>
{renderlefticon()}
</view>)
}
{renderrighticon && (
<view style={rightbutton}>
{renderrighticon()}
</view>)
}
</view>
);
Source: stackoverflow.com
Related Query
- Conditional Rendering of child elements in React
- React conditional rendering of multiple child components
- Rendering Polymer 1.0 elements with child content using React
- Testing a child component's conditional rendering in React Jest/Enzyme
- Conditional rendering of CSS style in elements React
- React Conditional Rendering child on click not working
- React conditional rendering bug even with single parent and child list
- Load data before rendering child elements React
- React Conditional Rendering Child
- Conditional rendering of HTML elements based on boolean value React
- Warning: Functions are not valid as a React child, using a conditional rendering
- React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows
- Most efficient way of rendering JSX elements when iterating on array of data in React
- React Router VS Conditional Rendering
- The price of rendering elements using D3 in a React application?
- react - how do I get the size of a component child elements and reposition them
- React not rendering classes on elements
- Gatsby: React conditional rendering based on window.innerWidth misbehaving
- Conditional rendering of HTML elements in React?
- Conditional Rendering in React won't work, state not working properly?
- React router nested routes. Not rendering child routes
- Jest enzyme shallow test is not rendering all elements of the React component
- List elements not rendering in React
- How to implement conditional rendering while the children component calling useState() in react hooks?
- React and React Router, rendering the same element twice with a different prop results in two elements with the same prop?
- react - conditional rendering inside component return function
- Conditional Rendering in React application using tsx
- React conditional style not rendering properly
- Conditional rendering in react for a multi language app in react
- React is slow when rendering many elements
More Query from same tag
- How to get updated data in React
- React Hooks: Referencing data that is stored inside context from inside useEffect()
- Restrict year value to 4 digit in react js input
- React sending list-select data not working with formik
- Trigger action of re-click/double click on first click of button
- How to properly return value from a data inside the function
- Adding Two Click Handlers to 1 Function both using React hooks useState
- What is the equivalent to ng-if in react.js?
- Reactjs: How to Off and On Webcam in reactjs
- How to add href to react-bootstrap-table column dynamically?
- i cant catch status and json values from createAsyncThunk function
- React - Axios promise pending value undefined
- My update action changes state after dispatching but returns back the initial data not the updated data when getting all contacts
- How can I conditionally return different navbars/headers in app.js based on the route?
- Add to Home screen (A2HS) feature detection (no user agent sniffing)
- Error on OnBlur after using useReduce in React
- How to display data from Rails 5 API in React.js frontend app?
- Input type="text" default value cant able to change in reactjs
- How to show Modal when we click on it using reactjs?
- Why does ReactDOM.render() render anything but ReactDOM.createRoot().render() does not?
- nodejs and react diferent ports for socket.io?
- how to show a hidden element on hover on tailwind
- How to reset the react-select component to defaultValue state after form submit
- rails ajax post invalid authenticity token
- React - update child when parent state changes, without using componentWillReceiveProps()?
- React.js - Value of checkbox not reflecting initial state
- How to concatenate React objects without JSX
- How to send the value of variable from a child component to the parent component?
- IconMenu doesn't appear in material-ui
- How to retrieve selectedRows from a material-table in React