I have a page with a child component for a browse button, on the parent component, with a callback I set the state with the browsed file.
For some reason, because of a different callback passed to an higher parent component the state is not being set with the attached file.
If I remove the second callback this.props.handleChange('attachment', file); everything works fine. Any idea why? (Nothing is wrong with the second callback, no errors etc)
Attachment page:
export default class Attachment extends React.Component {
state = {
attachment: {},
};
handleAddAttachment = file => {
this.setState({ attachment: file });
this.props.handleChange('attachment', file); // this causes the previous line to not working.
};
render() {
const { attachment } = this.state;
return (
<Fragment>
<div>
<div>
Do you have
<br />
something to <LineBreak />
show me?
</div>
<div css={attach}>Upload attachments here</div>
<AttachmentButton handleAddAttachment={this.handleAddAttachment} />
<AttachedFile attachment={attachment} />
</div>
</Fragment>
);
}
}
makeHandleChange method on parent component:
makeHandleChange = (pageName, change) => {
this.setState({
ticket: { ...this.state.ticket, [pageName]: change },
});
};
I think because your parent component gets new state so it rerenders and also causes the children to rerender and cancel the state. To keep your children intact you can set a key props to your child component or you can use shouldComponentUpdate. like this in your parent
<Attachment key="attachment-key" />
I don't know why this doesn't work, but you may want to try a workaround: passing the function as the second argument to setState.
See an example here:
react set state callback correct way to pass an argument
Since we don't know the context of what this.props.handleChange() does, I'm giving a generic answer. Try changing the function this way:
handleAddAttachment = file => {
this.setState({
attachment: file
}, () => {
this.props.handleChange('attachment', file);
});
};
Related
I'm trying to match the modal that shows with the clicked element, right now i'm rendering all the modals with the click, I been trying to make them match with the index but no luck , please help.
here are my constructors
constructor(props) {
super(props);
this.state = {
portfolioData: [],
newModal:[],
modalPost: false,
isShown: false
};
}
showModal = (i) =>{
this.setState({ isShown: true, modalPost: true })
}
closeModal = () => {
this.setState({isShown:false, modalPost: false})
}
and here I get the data and render two list component and the modal
componentDidMount() {
axios.get(`data.json`)
.then(res => {
const portfolioData = [res.data.portfolio.projects.film];
this.setState({ portfolioData });
})
};
the components
const portfolioList = this.state.portfolioData.map((value) =>
value.map((val, idx) =>
<PortfolioItem
id={val.title.en.toString().toLowerCase().split(" ").join("-")}
title={val.title.en}
imgsrc={val.imgsrc}
status={val.status}
profile={val.profile}
director={val.director}
production={val.production}
showModal={this.showModal}
youtube={val.trailer}
/>
))
const modalList = this.state.portfolioData.map((value) =>
value.map((val, idx) =>
<Modal
id={val.title.en.toString().toLowerCase().split(" ").join("-")}
title={val.title.en}
imgsrc={val.imgsrc}
status={val.status}
profile={val.profile}
director={val.director}
production={val.production}
closeModal={this.closeModal}
youtube={val.trailer}
/>
))
and the return
<section id="portfolio">
{ portfolioList }
{ this.state.modalPost !== false ? modalList : null }
</section>
Your code will make as many modal as the data held by this.state.portfolioData, which is unnecessary, inefficient and may result into wasted rendering. If you take a step back and think from this way, You are going to render only one modal but render it with the data of the selected item
Lets see an example,
We can start by having an additional state value selectedValue which will hold the clicked item's value
this.state = {
portfolioData: [],
newModal:[],
modalPost: false,
isShown: false,
selectedValue: {} //<---
};
Then, when the user clicks the item we can set that particular items value in the state; specifically in selectedValue
const portfolioList = this.state.portfolioData.map((value) =>
value.map((val, idx) =>
<PortfolioItem
id={val.title.en.toString().toLowerCase().split(" ").join("-")}
title={val.title.en}
imgsrc={val.imgsrc}
status={val.status}
profile={val.profile}
director={val.director}
production={val.production}
showData={() => this.showData(val)} //<---
youtube={val.trailer}
/>
))
//new function for one specific task <---
const showData = (value) => {
this.setState({selectedValue: value}, this.showModal)
}
Finally, instead of mapping over the data you can render only one modal which takes and show the data from the this.state.selectedValue
<Modal
id={this.state.selectedValue.title.en.toString().toLowerCase().split(" ").join("-")}
title={this.state.selectedValue.title.en}
imgsrc={this.state.selectedValue.imgsrc}
status={this.state.selectedValue.status}
profile={this.state.selectedValue.profile}
director={this.state.selectedValue.director}
production={this.state.selectedValue.production}
closeModal={this.closeModal}
youtube={this.state.selectedValue.trailer}
/>
This is merely an idea you can follow. You should organize/optimize your code later per your codebase afterwards. If you are unfamiliar with setStates second parameter it takes a callback as a second parameter which it executes after updating state. Reference: https://reactjs.org/docs/react-component.html#setstate
Hope this helps you, Cheers!
Edit: I just noticed you are not using that isShown anywhere. That is the value that the modal should be opened based on. The modal should have a prop which makes it show/hide by passing true/false, check the documentation. And you should pass this.state.isShown to that specific prop to make everything come together and work!
The problem is you are creating multiple instances of modals when you are looping over your portfolioData. I dont think you need the multiple instances since you will open only one at a time.
When you are setting the state of modal to isShown. You are actually setting state on all the instances of the generated modals. Hence you end up opening multiple modals. You should ideally have just one modal and pass data to your modal.
You can do this:
First, Move the modal out of the loop so that you have only one instance of it.
Pass data to:
<a>onClick={() => this.toggleModal(provider.data)} key={index}>Portfolio Item</a>
Lastly, in toggleModal function first set the data then open modal.
This way all your PortfolioItem links will end up calling the same modal instance. But with different data. Once you set the data you can rerender your component with the already existing isShown state.
Here is a small example:
This way all your PortfolioItem links will end up calling the same modal instance. But with different data. Once you set the data you can rerender your component with the already existing isShown state.
Here is a small example:
class App extends React.Component {
constructor(props){
super(props);
this.state = {
isShown: false,
data: ''
}
this.list = [{data: 'data1'}, {data: 'data2'}];
}
onAnchorClick({data},event){
this.setState({data, isShown: true});
}
render(){
return(
<div>
{this.list.map((obj, idx) => <div key={idx}>
<a onClick={this.onAnchorClick.bind(this, obj)}>Portfolio Item</a>
</div>)}
<div style={{display: !this.state.isShown ? 'none' : 'block'}}>
<h3>Data: {this.state.data}</h3>
</div>
</div>
)
}
}
window.onload = () => {
ReactDOM.render(<App />, document.getElementById("app"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I'm working on a form with Reactjs that gets some defaultValues from the parent component.
The problem is, the parent component set states of the values with a axios post and pass those values to the child as props. I can print those values on the child component with console.log but if I try to put those values on defaultValues on the TextFields I got a empty form, none of the values is rendered on the form.
Parent component:
export default class Parent extends Component {
constructor(props){
super(props);
this.state={
somevalue: '',
}
}
componentDidMount(){
this.getData();
}
getData = async () => {
await api.post('/getValue')
.then((res) => {
this.setState({
someValue: res.data;
})
}).catch((err) => {
console.log("Error: ", err);
})
}
render(){
return(
<Child value={this.state.someValue}/>
)}
}
Child component
export default function Child(props) {
console.log(props.value); // THIS LOG PRINT THE VALUE PROPERLY
return(
<TextField defaultValue={props.value}/>
)
}
This is basically my code structure, but it's not working. TextField still empty after this.
The property defaultValue is only used on the initial render. If you'll inspect your code you'll see that before the console.log outputs the value it will first output undefined. You can either change it to a controlled component by changing defaultValue to value. This way the value will display, but you'll need to add an onChange handler for the changes to the value.
function Child(props) {
// Using the value prop your value will display, but you will also have to pass an onChange handler to update the state in the parent
return <TextField value={props.value} />;
}
Or you can wait until the value is available before rendering your component
const { someValue } = this.state;
if (!someValue) {
return "loading the data";
}
return <Child value={someValue} />;
It depends on the exact situation what solution will be better. But I think it's likely you'll want to update the value in the input and do something with it, so I would go with the first situation.
I have a child component. It should create an object from props and render it. This object should get added as a state.
Below is the current code.
Example:-
<popupComponent element={object} />
popupComponent.js
class popupComponent extends Component {constructor(props) {
super(props);
this.state = {
name: ""
}
}
updateName (event) {
this.setState({
name: event.currentTarget.value
})
}
publishElement () {
this.props.saveAndClose({
name: this.state.name
});
this.setState({
name: ""
})
}
render() {
return (
<div draggable="true" >
<h4>Name:</h4>
<input id="elementName" type="text" placeholder="Enter element name" value={element.name} onChange={this.updateName.bind(this)}/>
<button id="saveAndClose" onClick={this.publishElement.bind(this)}>Save & close</button>
</div>
);
}
}
export default popupComponent;
Question: Which function other than render gets executed whenever state is changed? In this scenario constructor runs only once and I cannot try that because the time constructor gets executed, state isnt available.
Resolved issue by conditionally not creating the component at all.
Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown.
Resolved issue by conditionally not including the component at all as below.
{this.state.show ? <PopupMarkupEditor
element = {selectedElement}
saveAndClose = {this.saveElement}
show = {this.state.show}
/> : null }
I have a drag and drop field (called react-dropzone) that setState of a file.
I want the file.name to be rendered in the browser.
When tested, it produces no errors nor results. I can get other states to render in the normal way. Any suggestions?
Code:
class Home extends Component {
state = {
fileName: {}
};
handleOnDrop = file => {
this.setState({ file });
};
render() {
return (
<div>
<Dropzone onDrop={this.handleOnDrop} </Dropzone>
<h3>{this.state.file.name}</h3>
</div>
);}}
export default Home;
Thanks!
EDIT: The answer is that I was trying to pass a full array to a value not set up to take an array. In this case, I needed to pass a single element (file name) from file array to the state.
onDrop returns an array of accepted files.
handleOnDrop: (acceptedFiles) => {
acceptedFiles.forEach(file => {
console.log(file.name);
})
}
Docs
This might not be the answer, and I don't know if you pasted the whole code, but a closing tag is missing on your Dropzone component.
A sandbox demo would help imo
I have container, binded with connect() to my store.
// GetActiveAccount.jsx
const VisibleActiveAccountsList = connect(
mapStateToProps,
mapDispatchToProps
)(ActiveAccountsSelector)
ActiveAccountsSelector is the presentational component. Inside this presentational component I load two child presentational components which are only
//activeAccountSelector render method
return(
<div>
<GatewaySelector gateways={gateways} onSelectGateway={ (e) => {
console.log(e.target.value);
}
}/>
<PairSelector gateway={gateways[0]} onSelectPair={ (e) => {
console.log(e.target.value);
}
}/>
</div>
)
What I want is that the selected value on gatewaySelector determine the value passed to PairSelector and update it when changed.
What is the right way to do that ? Going through actions seems way overkill for a simple select change update.
I guess I have to manager that in the parent (activeAccountSelector) but how ? It seems not advised to change state without going through the whole process (actions,reducers ...etc) shall I do that changing parents props ?
Yes. You have to manage that in state of the parent component. Simply, you can change set the value for gateway property of PairSelector from parent's state and change the state when gateway change in GatewaySelector.
Redux suggest to using react state for the state that doesn't matter to the app globally. Read this comment from the Redux author for more information.
class ActiveAccountSelector extends React.Component{
contructor(props){
super(props);
this.state = { selectedGateway: null};
this.onSelectGateway = this.onSelectGateway.bind(this);
}
onSelectGateway(e){
this.setState({ selectedGateway: e.target.value });
}
render(){}
....
return(
<div>
<form>
<GatewaySelector gateways={gateways} onSelectGateway={ this.onSelectGateway}
}/>
<PairSelector gateway={this.state.selectedGateway} onSelectPair={ (e) => {
console.log(e.target.value);
}}/>
</form>
</div>
);
}
}