I'm using a component library and I cannot figure this out. I'm new to react and javascript and need help.
There is a component in the library that renders a header panel with tabs.
Component
|_Component.Tab
The Tab component has 2 states that change its appearance when it is clicked. But the click handler and state changes have to be defined by me outside of Tab component. How do I do this?
Seems to me by your question that you need to use props to pass the function to change state from the Component to the Tabs. Something like this:
Component
changeState(value) {
this.setState({ appearance: value });
}
render() {
return (
<div>
<Tab
appearance={this.state.appearance}
onChangeState={this.changeState}
/>
</div>
);
}
Tab
render() {
console.log('Appearance: ', this.props.appearance); // Use it for whatever you need it
return (
<div>
<Button
onClick={(value) => this.props.onChangeState(value)} />
</div>
);
}
Not sure why do you want to handle a function and it’s state outside of the component when it has to be within the Tab component. But here is the solution what you actually have to do in your Tab component to handle your state
Bind your handler function inside a constructor like below
Eg:
this.handlerFunction = this.handlerFunction.bind(this)
Call this.handlerFunction reference in your tab onClick
Eg:
onClick={this.handlerFunction}
Set state in handlerFunction
Eg:
handlerFunction(event){
this.setState({
tabClicked: event.target.value
})
}
Else I guess The outside component should be a child component that you are talking about. If so pass your tab click state as props to your outside component (i.e., child component) and receive that state as props in your child component and do setState there.
If you are still unclear then
Post your component code here. With Just theory it’s little difficult to understand the actual problem that you are talking about.
Related
I'm currently learning React, and trying to get a sense of how components re-render. I have this parent component which renders three items. Each item just renders an <li>
function App() {
console.log("Parent Rerendered");
return (
<div>
<ul>
<Item1 />
<Item2 />
<Item3 />
</ul>
</div>
);
}
Item2 is a bit different because it also renders an "x" that will un-render the component when it's clicked:
function Item2() {
const [visible, setVisible] = useState(true);
const makeInvisible = () => {
setVisible(false);
};
console.log("Item 2 Rerendered");
return visible ? (
<div>
<li>
Second Item <span onClick={makeInvisible}>X</span>
</li>
</div>
) : null;
}
When I test this in my browser and click the "x", I can see from the console that Item2 gets re-rendered. However, none of the other components get re-rendered including the parent component. However the parent component does change, so how does this happen without re-rendering it.
If that's a bit confusing, here's an illustration of the initial state, my expectations, and reality. What am I misunderstanding about how React re-renders components?
A component rerenders when it sets state, or when its parent rerenders1. App has no state and no parent, so it will never rerender. It doesn't need to though. React saves the virtual DOM from the previous render, so it still knows that App is supposed to be a div surrounding a ul surrounding an Item1, Item2, and Item3. If the Item2 rerenders, and returns a null instead of a div, react will update the part of the real DOM that the Item2 is responsible for, by removing the div. The rest of the page remains intact
1) or if a context it consumes changes, or in a class component when you call forceUpdate. But for most cases, it's just state and parent that matter.
Instead of clicking onto <Item2 /> go to the Dev-tools -> Explorer -> select the Element and press delete. The view will also change, the gap will close, without react being involved at all.
React is responsible to update the DOM, the layout is done by the browser. So when <Item2 /> decides it wants to be rendered as null instead of a div>li (??? invalid markup ) and therefore removes the respective DOM-nodes, the browser will update the layout.
And the parent component has nothing to do with all that.
i getting error message when i am passing my prop to component. This props is a to displaying button element in payment. Certain component must not show this button but when i pass the prop all the component that uses this button is hidden here are my code for the parent. My problem is same as this (https://laracasts.com/discuss/channels/vue/using-v-if-to-render-one-template-or-another-based-on-a-props) and the solution does not work for me
<payment :sharedButton="false"><payment>
this is my payment.vue button
<div class="col-lg-auto" v-if="unpaid.qr_code === 1 && sharedButton === true">
<q-btn glossy
size="md"
:label="$t('Common.GetQrCode.Button')"
#click="makePayment(unpaidIndex, true)" color="positive"
>
</q-btn>
</div>
export default{
props: {
sharedButton: {
type: Boolean,
default: true
},
here is the logic that when the sharedButton is false then hide it but when the sharedButton is true then show the button
Expected result:
Button in certain component is hidden
Current Result:
All the component with the button is hidden and get avoid mutate props directly
so i solve the my problem apparently i cannot directly assigned instead i declare a variable called isHidden in data()
data(){
isHidden : false;
}
then declare it by <payment-tab sharedButton = "isHidden">
You are facing the issue as you are directly mutating the prop in the child component and the parent isn't notified about the same. A simple way to solve this is to sync the value of prop in the child and the parent component. So, you can change the value directly in the parent component and since props are reactive the new value of the prop would directly get assigned to the child component.
I am assuming that you'd have an option to change the value back to true in your parent component.
<payment :sharedButton.sync="sharedButton"><payment>
(The second sharedButton would be the value kept in the parent component)
Now, when you want to change the prop inside the child just use
this.$emit('update:sharedButton', false)
render() {
return (
<input
onChange={this.handleChange}
value={this.props.transcript}
type='text
/>
)
}
in the above example, If text value is changed using keyboard inputs, it will trigger onChange event, but if it's being changed dynamically via this.props.transcript, onChange event is not triggered. How to solve this issue?
You can use componentWillReceiveProps hooks to achieve it, as your props get updated it will call componentWillReceiveProps method. Inside the method it is your playground. Please make sure this method will be called on each and every time the props changes
import React,{ Component } from 'react'
class InputBox extends Component {
componentWillReceiveProps(nextProps){
// write your logic here or call to the common method
console.log(nextProps.transcript);
}
handleChange(e){
console.log(e.target.value)
}
render(){
return(
<section>
<input
onChange={this.handleChange}
value={this.props.transcript}
type='text'
/>
</section>
);
}
}
export default InputBox;
If we are using react setState correctly it should work without issue but, Look like you have two sets of values one coming from parent "this.props.transcript" and one in input box which is handled by "this.handleChange". Alternately, check need of react hooks like "componentWillUpdate" and "componentWillReceiveProps" to apply state change on input.
Without seeing more of the code, it looks like your value for transcript in the input is wrong.
Try value={props.transcript} and if that doesn’t work value={this.state.transcript}.
I have created a React application. In this application, I've created following components:
App Component (root) : where data is loaded into state
CardList Component: List of Cards, data is passed to it using props
Card Component: use forEach to pass data to Card and it has button
CustomButton Component: acts like a button with style
What I want is when the user clicks button on any of the Card, a number should get increased everytime. But I am not able to access Data here.
Can anyone help?
Here is the Card Component for your reference:
class Card extends Component {
render() {
return (
<div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
<h2>Votes: {this.props.votes}</h2>
<div>
<img src={this.props.pic} alt='Superstar'/>
<div>
<h2>{this.props.name}</h2>
<p>{this.props.email}</p>
</div>
</div>
<ActionButton btnText="Vote Now!" clickhandler={this.onVoteButtonClick}/>
</div>
);
}
onVoteButtonClick = (event) => {
console.log('It was clicked : '+this.props.id);
}
}
Two options which you should research more to see what suits your need best:
Redux (or something similar)
The new Context API available in React 16.
The gist of either solution is that you're managing application state independently of the dependent component tree(s). The Context API is arguably easier to implement whereas you'll currently find many more examples explaining the Redux approach as it's still the most common solution right now.
I have created bootstrap modal component in react.
var carModal=<Modal handleHideModal={this.handleHideCarModal}
onConfirm={this.confirmCarModal}
title="Car"
id="CarModal">
<CarStructure callbackParent={this.showCarOptionsUpdate}/>
</Modal>
In car structure I have a form where based on button click I want to remove <CarStructure> child component from the modal carModal and update it with another component with different form structure. How can I replace <CarStructure> with another component having totally different user interface and options?
Remember that the job of a React component's render function is to describe how the component should look at any given point at time, so you don't "remove" or "change" pieces of the DOM so much as you describe when they should change themselves. So, you'll want to base the internal component of <Modal> on some sort of state (which may change throughout the life of the parent component). Something like this might do the trick:
var carModalBody;
if (this.state.something) {
var carModalBody = <CarStructure callbackParent={this.showCarOptionsUpdate} />;
} else {
var carModalBody = <SomeOtherComponent />;
}
var carModal = <Modal handleHideModal={this.handleHideCarModal}
onConfirm={this.confirmCarModal}
title="Car"
id="CarModal">
{carModalBody}
</Modal>