I want to do an if statement. When the prop function is clicked(when you press OK button), I want to render ComponentA otherwise I want to render ComponentB.
Component B contains the button OK and I pass to it as a prop the function.
My if condition is not working properly. Any ideas?
My code:
clickButton() {
console.log("yeah");
}
render() {
const {
clickButton
} = this.props;
return this.clickButton ? (
<ComponentA/>
) : (
<ComponentB clickButton={clickButton}/>
);
}
}
Example.propTypes = {
clickButton: PropTypes.func
};
Not sure if this is what you're looking for:
state = { clicked: false }
clickButton = () => {
console.log("yeah");
this.setState({clicked: !this.state.clicked})
}
render() {
const { clicked } = this.state;
return clicked ? (
<ComponentA/>
) : (
<ComponentB clickButton={this.clickButton}/>
);
}
}
If you want the state outside this component:
clickButton = e => {
console.log("yeah");
// so you will edit the value "clicked" passed as prop in the parent component
this.props.clickButton(e)
}
render() {
const { clicked } = this.props;
return cicked ? (
<ComponentA/>
) : (
<ComponentB clickButton={this.clickButton}/>
);
}
}
You need to pass a state value through the component, so the changed event can be caught, here's how
Parent Component
state = {
isButtonClicked: false
}
clickButton = () => {
this.setState({ isButtonClicked: true })
}
render() {
return (
<Child isButtonClicked={this.state.isButtonClicked} clickButton={this.clickButton} />
)
}
Child Component
render() {
const {
isButtonClicked,
clickButton
} = this.props
return this.isButtonClicked ? (
<ComponentA/>
) : (
<ComponentB clickButton={clickButton}/>
)
}
Example.propTypes = {
isButtonClicked: PropTypes.bool,
clickButton: PropTypes.func
}
Related
In reactjs I want to update parent state based on child state.
My parent component in Login.
I want child state in Login component role function
//this function to show link //
function GetLink(props) {
const { role } = props
let admin = <Link to='/Admin'>Admin</Link>
let f = <Link to='/Finance'>Finance</Link>
let s = <Link to='/Sales'>Sales</Link>
switch (role) {
default:
case "admin": return (
<>
{admin}
{f}
{s}
</>
)
case "finance": return (
<>
{f}
{s}
</>
)
case "sales": return (
<>
{s}
</>
)
}
}
//this is the parent component //
class Login extends Component {
constructor(props) {
super(props);
this.state = {
role: ""
}
}
//want this state to be update when child state is updated
role = () => {
this.setState({ role: });
}
render() {
return (
<>
{ this.state.role === "admin" }
<GetLink role={localStorage.getItem("role")} />
</>
);
}
}
now this is my child component where the state is updating in componentDidMount
//this is child component //
//the state is updating in this component //
class Sales extends Component {
constructor(props) {
super(props);
this.state = {role: "" }
}
componentDidMount() {
if (localStorage.getItem("role") === null) {
this.props.setState({ role: localStorage.setItem('role', 'sales') })
}
}
logout() {
localStorage.removeItem('role');
}
render() {
return (
<>
<h1>Sales</h1>
<button onClick={this.logout}>logout</button>
</>
);
}
}
export default Sales;
can anyone help me out with this problem?
I think it is the best way that you send a function as props.
<GetLink role={this.role} />
I am trying to conditionally render a component based on toggling of flag inside state. It looks like the state is getting updated but the component is not getting rendered. Can some one tell what is wring here. renderTree function updates the state, but render is not called then.
import React from "react";
import CheckboxTree from "react-checkbox-tree";
import "react-checkbox-tree/lib/react-checkbox-tree.css";
import { build } from "../data";
import { Input, Dropdown } from "semantic-ui-react";
import _ from "lodash";
class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
nodes: build(),
checked: [],
expanded: [],
isDropdownExpanded: false,
keyword: ""
};
}
onCheck = checked => {
this.setState({ checked }, () => {
console.log(this.state.checked);
});
};
onExpand = expanded => {
this.setState({ expanded }, () => {
console.log(this.state.expanded);
});
};
renderTree = () => {
this.setState(
prevState => {
return {
...prevState,
isDropdownExpanded: !prevState.isDropdownExpanded
};
},
() => {
console.log(this.state);
}
);
};
onSearchInputChange = (event, data, searchedNodes) => {
this.setState(prevState => {
if (prevState.keyword.trim() && !data.value.trim()) {
return {
expanded: [],
keyword: data.value
};
}
return {
expanded: this.getAllValuesFromNodes(searchedNodes, true),
keyword: data.value
};
});
};
shouldComponentUpdate(nextProps, nextState) {
if (this.state.keyword !== nextState.keyword) {
return true;
}
if (!_.isEqual(this.state.checked, nextState.checked)) {
return true;
}
if (_.isEqual(this.state.expanded, nextState.expanded)) {
return false;
}
return true;
}
getAllValuesFromNodes = (nodes, firstLevel) => {
if (firstLevel) {
const values = [];
for (let n of nodes) {
values.push(n.value);
if (n.children) {
values.push(...this.getAllValuesFromNodes(n.children, false));
}
}
return values;
} else {
const values = [];
for (let n of nodes) {
values.push(n.value);
if (n.children) {
values.push(...this.getAllValuesFromNodes(n.children, false));
}
}
return values;
}
};
keywordFilter = (nodes, keyword) => {
let newNodes = [];
for (let n of nodes) {
if (n.children) {
const nextNodes = this.keywordFilter(n.children, keyword);
if (nextNodes.length > 0) {
n.children = nextNodes;
} else if (n.label.toLowerCase().includes(keyword.toLowerCase())) {
n.children = nextNodes.length > 0 ? nextNodes : [];
}
if (
nextNodes.length > 0 ||
n.label.toLowerCase().includes(keyword.toLowerCase())
) {
n.label = this.getHighlightText(n.label, keyword);
newNodes.push(n);
}
} else {
if (n.label.toLowerCase().includes(keyword.toLowerCase())) {
n.label = this.getHighlightText(n.label, keyword);
newNodes.push(n);
}
}
}
return newNodes;
};
getHighlightText = (text, keyword) => {
const startIndex = text.indexOf(keyword);
return startIndex !== -1 ? (
<span>
{text.substring(0, startIndex)}
<span style={{ color: "red" }}>
{text.substring(startIndex, startIndex + keyword.length)}
</span>
{text.substring(startIndex + keyword.length)}
</span>
) : (
<span>{text}</span>
);
};
render() {
const { checked, expanded, nodes, isDropdownExpanded } = this.state;
let searchedNodes = this.state.keyword.trim()
? this.keywordFilter(_.cloneDeep(nodes), this.state.keyword)
: nodes;
return (
<div>
<Dropdown fluid selection options={[]} onClick={this.renderTree} />
{isDropdownExpanded && (
<div>
<Input
style={{ marginBottom: "20px" }}
fluid
icon="search"
placeholder="Search"
iconPosition="left"
onChange={(event, data) => {
this.onSearchInputChange(event, data, searchedNodes);
}}
/>
<CheckboxTree
nodes={searchedNodes}
checked={checked}
expanded={expanded}
onCheck={this.onCheck}
onExpand={this.onExpand}
showNodeIcon={true}
/>
</div>
)}
</div>
);
}
}
export default Widget;
Problem is in your shouldComponentUpdate method:
shouldComponentUpdate(nextProps, nextState) {
if (this.state.keyword !== nextState.keyword) {
return true;
}
if (!_.isEqual(this.state.checked, nextState.checked)) {
return true;
}
if (_.isEqual(this.state.expanded, nextState.expanded)) {
return false;
}
return true;
}
Since renderTree only changes isDropdownExpanded value, shouldComponentUpdate always returns false
If shouldComponenetUpdate returns true then your component re-renders, otherwise it dosen't.
In your code sandbox, it can be seen that every time you click on the dropdown, the shouldComponenetUpdate returns false for this condition
if (_.isEqual(this.state.expanded, nextState.expanded)) {
return false;
}
Either you need to change the state of this variable in your renderTree function or you need to re-write this condition as
if (_.isEqual(this.state.isDropdownExpanded, nextState.isDropdownExpanded)) {
return false;
}
Ciao, to force a re-render in React you have to use shouldComponentUpdate(nextProps, nextState) function. Something like:
shouldComponentUpdate(nextProps, nextState) {
return this.state.isDropdownExpanded !== nextState.isDropdownExpanded;
}
When you change isDropdownExpanded value, shouldComponentUpdate will be triggered and in case return is equal to true, component will be re-rendered. Here working example (based on your codesandbox).
How can I access to my refresh() method in my UpdateLokalListe function?
Is there any possibility to include the function in my class?
I used this guide: https://reactnavigation.org/docs/function-after-focusing-screen
Thanks
https://pastebin.com/NMfTS8tp
function UpdateLokalListe(refresh) {
useFocusEffect(
React.useCallback(() => {
refresh();
})
);
return null;
}
export default class LokaleBearbeitenScreen extends Component {
state = {
lokale: [],
isLoading: true,
};
_retrieveData = async () => {
...
};
_refresh = () => {
alert('refresh');
this.setState({ isLoading: true });
this._retrieveData();
};
componentDidMount() {
Firebase.init();
this._retrieveData();
}
render() {
...
return (
<>
<UpdateLokalListe refresh={this._refresh} />
...
</>
);
}
}
UpdateLokalListe looks like functional component, and you are passing refresh props
So change this :
UpdateLokalListe(refresh)
to :
UpdateLokalListe({refresh})
OR
function UpdateLokalListe(props) { // <---- Here
useFocusEffect(
React.useCallback(() => {
props.refresh(); // <---- Here
})
);
return null;
}
In an effort to figure out the problem I explain in my (unanswered) question "How do I update a react-bootstrap-table2 cell value after it's edited so a button component in a different column has it?", I attempted to pass a function that returns the cell value into the button component:
class NominationQueueBootstrapTable extends Component {
...
getInitialBid = (row) => {
console.log('getInitialBid');
return this.state.data.find(r => r.rank === row.rank).initialBid;
}
render() {
const { auctionId } = this.props;
const { teamId } = this.props;
function buttonFormatter(cell, row) {
return (
<NominateButton
row={ row }
auctionId={ auctionId }
teamId={ teamId }
getInitialBid={ this.getInitialBid }
/>
);
}
...
My NominateButton component returns another button wrapper component that calls a mutator:
class NominateButton extends Component {
render() {
const { row } = this.props;
const { auctionId } = this.props;
const { teamId } = this.props;
const playerId = parseInt(this.props.row.player.id, 10);
return (
<Query
query={TEAM_NOMINATIONS_OPEN_QUERY}
variables={{ team_id: teamId }}>
{({ data, loading, error, subscribeToMore }) => {
if (loading) return <Loading />;
if (error) return <Error error={error} />;
return (
<NominateButtonMutator
auctionId={ auctionId }
teamId={ teamId }
playerId={ playerId }
row={ row }
nominationsOpen={ data.team.nominationsOpen }
subscribeToNominationsOpenChanges={ subscribeToMore }
getInitialBid={ this.props.getInitialBid }
/>
);
}}
</Query>
);
}
}
And because I need to invoke the mutator when the button is pressed, my onClick function first calls the getInitialBid function passed in as a property, and then invokes the mutator:
class NominateButtonMutator extends Component {
...
handleButtonPressed = (submitBid) => {
this.setState({bidAmount: this.props.getInitialBid(this.props.row)});
submitBid();
};
render() {
const { auctionId } = this.props;
const { teamId } = this.props;
const { playerId } = this.props;
const { nominationsOpen } = this.props;
return (
<Mutation
mutation={SUBMIT_BID_MUTATION}
variables={{
auction_id: auctionId,
team_id: teamId,
player_id: playerId,
bid_amount: this.state.bidAmount
}}
>
{(submitBid, { loading, error }) => (
<div>
<Error error={error} />
<Button
disabled={ loading || !nominationsOpen }
onClick={() => this.handleButtonPressed(submitBid) }
variant="outline-success">
Nominate
</Button>
</div>
)}
</Mutation>
);
}
}
(The onClick= code was updated from azium's comment.)
When I run this, I get:
"TypeError: this.props.getInitialBid is not a function"
Is this a workable strategy? Why isn't this.props.getInitialBid a function?
You are using the old function syntax, so this is not bound correctly.
change:
function buttonFormatter(cell, row) {
return (
<NominateButton
row={ row }
auctionId={ auctionId }
teamId={ teamId }
// scoped to your local function not your class
getInitialBid={ this.getInitialBid }
/>
);
}
to
const buttonFormatter = (cell, row) => {
return (
<NominateButton
row={ row }
auctionId={ auctionId }
teamId={ teamId }
// this is scoped "lexically" aka to your class
getInitialBid={ this.getInitialBid }
/>
);
}
could you please tell me how to hide the component in reactJS and show another component?I have one button and text (hello).on button click, I want to hide button as well as text and show another text bye
here is my code
https://codesandbox.io/s/50lj63xvk
showBankDetail = () => {
console.log("====");
this.setState({
validForm: true
});
};
render() {
const validForm = !this.state.validForm;
return { validForm } ? (
<div>
heloo<button onClick={this.showBankDetail}>hide</button>
</div>
) : (
<div>bye</div>
);
}
One way is to put it on a separate variable first
showBankDetail = () => {
console.log("====");
this.setState({
validForm: true
});
};
render() {
const validForm = !this.state.validForm;
let form;
if (validForm) {
form = (<div>
heloo<button onClick={this.showBankDetail}>hide</button>
</div>);
} else {
form = (<div>bye</div>);
}
return ({form});
}
{ validForm } is creating an object with property validForm and value of validForm (e.g. true or false). You can read more about it here. Your code should look like this
showBankDetail = () => {
console.log("====");
this.setState({
validForm: true
});
};
render() {
const validForm = !this.state.validForm;
return validForm ? (
<div>
heloo<button onClick={this.showBankDetail}>hide</button>
</div>
) : (
<div>bye</div>
);
}
There are a few things you should look at. First off you want to toggle the validForm state, so do that in the showBankDetail function. You could return different elements based on validForm, but you can also do it inline. See:
class App extends React.Component {
constructor() {
super();
this.state = {
validForm: false
};
}
showBankDetail = () => {
this.setState({
validForm: !this.state.validForm
});
};
render() {
return (
<div>
{ this.state.validForm ?
<div>heloo</div> :
<div>bye</div>
}
<button onClick={this.showBankDetail}>hide</button>
</div>
)
}
}