In my project I have a payment form which conditionally renders 2 Stripe elements (PaymentRequestForm.js & CheckoutForm.js), I have passed the Props down from the main form component FullfillRequest.js to PaymentRequestForm.js, however I'm struggling with passing the same props down to CheckoutForm.js.
The function of the props is to enable submit of the form upon Stripe payment is completion.
With the current set-up, the error is this.props.setComplete() is undefined in CheckoutForm.js.
FulfillRequest.js
setComplete = val => {
this.setState({
complete: val
});
};
render() {
return <PaymentRequestForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
<Button disabled={loading || !this.state.complete} >
Fulfill Request
</Button>
}
PaymentRequestForm.js
class PaymentRequestForm extends React.Component {
constructor(props) {
super(props);
paymentRequest.on("token", async ev => {
const response = await fetch();
if (response.ok) {
this.props.setComplete(true);
}
});
this.state = {
canMakePayment: false,
paymentRequest,
complete: false
};
}
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return this.state.canMakePayment ? (
<PaymentRequestButtonElement />
) : (
<CheckoutForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
);
CheckoutForm.js
class CheckoutForm extends Component {
constructor(props) {
super(props);
this.state = { complete: false };
this.submit = this.submit.bind(this);
}
async submit(ev) {
let response = await fetch();
if (response.ok) {
this.props.setComplete(true);
}
}
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return (
<Button onClick={this.submit}>
Send
</Button>
);
}
}
Any help will be greatly appreciated, thanks!
Inside PaymentRequstForm setComplete is accessible via this.props.setComplete not this.setComplete (cause it's coming from FulfillRequest)
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return this.state.canMakePayment ? (
<PaymentRequestButtonElement />
) : (
<CheckoutForm
setComplete={this.props.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
);
Related
How I can pass to child component from parent data requested by ajax call?
For example I have code like that
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
async componentDidMount() {
const response = await fetch();
this.setState(response.data);
}
render() {
return (
<ChildComponent data={this.state} /> // data={}
);
}
}
Problem here is ChildComponent will be mount before data will be fetch so I will get empty object data in ChildComponent.
Check if data is available or not
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
async componentDidMount() {
const response = await fetch();
this.setState(response.data);
}
render() { // Return if response is Object
return Object.keys(this.state).length > 0
? <ChildComponent data={this.state} /> // data={}
: <div>Loading...</div>
}
render() { // Return if response is Array
return this.state.length > 0
? <ChildComponent data={this.state} /> // data={}
: <div>Loading...</div>
}
}
You can decide to render the children only if there is some data.
For this, maybe don't replace the whole state with data but create a separate key. It will be easier if you need to add some other state after.
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
async componentDidMount() {
const response = await fetch();
this.setState({ data: response.data });
}
render() {
const { data } = this.state;
return data ? <ChildComponent data={data} /> : null;
}
}
I have a button for each div. And when I press on it, it has to show the div with the same key, and hide the others.
What is the best way to do it ? This is my code
class Main extends Component {
constructor(props) {
super(props);
this.state = {
messages: [
{ message: "message1", key: "1" },
{ message: "message2", key: "2" }
]
};
}
handleClick(message) {
//something to show the specific component and hide the others
}
render() {
let messageNodes = this.state.messages.map(message => {
return (
<Button key={message.key} onClick={e => this.handleClick(message)}>
{message.message}
</Button>
)
});
let messageNodes2 = this.state.messages.map(message => {
return <div key={message.key}>
<p>{message.message}</p>
</div>
});
return <div>
<div>{messageNodes}</div>
<div>{messageNodes2}</div>
</div>
}
}
import React from "react";
import { render } from "react-dom";
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
messages: [
{ message: "message1", id: "1" },
{ message: "message2", id: "2" }
],
openedMessage: false
};
}
handleClick(id) {
const currentmessage = this.state.messages.filter(item => item.id === id);
this.setState({ openedMessage: currentmessage });
}
render() {
let messageNodes = this.state.messages.map(message => {
return (
<button key={message.id} onClick={e => this.handleClick(message.id)}>
{message.message}
</button>
);
});
let messageNodes2 = this.state.messages.map(message => {
return (
<div key={message.key}>
<p>{message.message}</p>
</div>
);
});
const { openedMessage } = this.state;
console.log(openedMessage);
return (
<div>
{openedMessage ? (
<div>
{openedMessage.map(item => (
<div>
{" "}
{item.id} {item.message}{" "}
</div>
))}
</div>
) : (
<div> Not Opened</div>
)}
{!openedMessage && messageNodes}
</div>
);
}
}
render(<Main />, document.getElementById("root"));
The main concept here is this following line of code.
handleClick(id) {
const currentmessage = this.state.messages.filter(item => item.id === id);
this.setState({ openedMessage: currentmessage });
}`
When we map our messageNodes we pass down the messages id. When a message is clicked the id of that message is passed to the handleClick and we filter all the messages that do not contain the id of the clicked message. Then if there is an openedMessage in state we render the message, but at the same time we stop rendering the message nodes, with this logic {!openedMessage && messageNodes}
Something like this. You should keep in state only message key of visible component and in render method you should render only visible component based on the key preserved in state. Since you have array of message objects in state, use it to render only button that matches the key.
class Main extends Component {
constructor(props) {
super(props);
this.state = {
//My array messages: [],
visibleComponentKey: '',
showAll: true
};
handleClick(message) {
//something to show the specific component and hide the others
// preserve in state visible component
this.setState({visibleComponentKey : message.key, showAll: false});
};
render() {
const {visibleComponentKey, showAll} = this.state;
return (
<div>
{!! visibleComponentKey && ! showAll &&
this.state.messages.filter(message => {
return message.key == visibleComponentKey ? <Button onClick={e => this.handleClick(message)}>{message.message}</Button>
) : <div /> })
}
{ !! showAll &&
this.state.messages.map(message => <Button key={message.key} onClick={e => this.handleClick(message)}>{message.message}</Button>)
}
</div>
);
}
}
I haven't tried it but it gives you a basic idea.
I cannot reply to #Omar directly but let me tell you, this is the best code explanation for what i was looking for! Thank you!
Also, to close, I added a handleClose function that set the state back to false. Worked like a charm!
onCloseItem =(event) => {
event.preventDefault();
this.setState({
openedItem: false
});
}
I'm beginner on react and i've written the code below:
class Note extends React.Component {
constructor(props) {
super(props);
this.state = {editing: false};
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}
edit() {
// alert('edit');
this.setState({editing: !this.state.editing});
}
save() {
this.props.onChange(this.refs.newVal.value, this.props.id);
this.setState({editing: !this.state.editing});
// console.log('save is over');
}
renderForm() {
return (
<div className="note">
<textarea ref="newVal"></textarea>
<button onClick={this.save}>SAVE</button>
</div>
);
}
renderDisplay() {
return (
<div className="note">
<p>{this.props.children}</p>
<span>
<button onClick={this.edit}>EDIT</button>
<button onClick={this.remove}>X</button>
</span>
</div>
);
}
render() {
console.log(this.state.editing);
return (this.state.editing) ? this.renderForm()
: this.renderDisplay()
}
}
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
notes: []
};
this.update = this.update.bind(this);
this.eachNote = this.eachNote.bind(this);
this.add = this.add.bind(this);
}
nextId() {
this.uniqeId = this.uniqeId || 0;
return this.uniqeId++;
}
add(text) {
let notes = [
...this.state.notes,
{
id: this.nextId(),
note: text
}
];
this.setState({notes});
}
update(newText, id) {
let notes = this.state.notes.map(
note => (note.id !== id) ?
note :
{
id: id,
note: newText
}
);
this.setState({notes})
}
eachNote(note) {
return (<Note key={note.id}
id={note.id}
onChange={this.update}>
{note.note}
</Note>)
}
render() {
return (<div className='board'>
{this.state.notes.map(this.eachNote)}
<button onClick={() => this.add()}>+</button>
</div>)
}
}
ReactDOM.render(<Board />,
document.getElementById('root'));
In render(), onClick event has a function, that is, if used in this way: {this.add} the following error is created:
Uncaught Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, ...})
Why? while in the eachNote() method this command is used:
onChange={this.update}
And there was no error.
Someone can tell me the reason? thanks.
The problem is that in the add function you are taking an argument text and setting it in the state so when you call onClick={() => this.add()}, you are not passing any argument to add function and hence in its definition text is undefned and hence state note is set as undefined.
However if you directly call it like onClick={this.add} , the add function receives the event object as a parameter and hence it sets state note to be an event object which you are using to render
onClick={this.add} will pass the click event to this.add.
So what you need to do is either:
onClick={e => this.add('some text')} or similar.
If you want to onClick={this.add} you have to ensure that your add method is: add(event) { ... } instead.
The <Note /> component does not contain a render() method to return anything. Add a render() method and return something.
class Note extends React.Component {
constructor(props) {
super(props);
this.state = {editing: false};
this.edit = this.edit.bind(this);
}
edit() {
// alert('edit');
this.setState({editing: !this.state.editing});
}
render() {
return (
<div>Render something</div>
)
}
}
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
notes: []
};
this.update = this.update.bind(this);
this.eachNote = this.eachNote.bind(this);
this.add = this.add.bind(this);
}
nextId() {
this.uniqeId = this.uniqeId || 0;
return this.uniqeId++;
}
add(text) {
let notes = [
...this.state.notes,
{
id: this.nextId(),
note: text
}
];
this.setState({notes});
}
update(newText, id) {
let notes = this.state.notes.map(
note => (note.id !== id) ?
note :
{
id: id,
note: newText
}
);
this.setState({notes})
}
eachNote(note) {
return (<Note key={note.id}
id={note.id}
onChange={this.update}>
{note.note}
</Note>)
}
render() {
return (<div className='board'>
{this.state.notes.map(this.eachNote)}
<button onClick={() => this.add()}>+</button>
</div>)
}
}
ReactDOM.render(<Board />,
document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>
In a section of a book I am coding along with it explains how a child component would get access to a parents methods.
The way to communicate from the child to a parent is by passing callbacks from the parent to the child, which it can call to achieve specific tasks. In this case, you pass createIssue as a callback property from IssueTable to IssueAdd. From the child, you just call the passed in function in your handler to create a new issue.
The author mentions IssueTable (sibling) to IssueAdd(sibling) he probably meant IssueList (parent) to IssueAdd(child)—right?
I would think just by examining the return JSX from IssueList...
We could see IssueTable is sibling to IssueAdd, no?
const contentNode = document.getElementById('contents');
class IssueFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
This is placeholder for the Issue Filter.{this.props.name}
{this.props.age}
</div>
);
}
}
const IssueRow = props => (
<tr>
<td>{props.issue.id}</td>
<td>{props.issue.status}</td>
<td>{props.issue.owner}</td>
<td>{props.issue.created.toDateString()}</td>
<td>{props.issue.effort}</td>
<td>{props.issue.completionDate ? props.issue.completionDate.toDateString() : ''}</td>
<td>{props.issue.title}</td>
</tr>
);
function IssueTable(props) {
const issueRows = props.issues.map(issue => <IssueRow key={issue.id} issue={issue} />);
return (
<table className="bordered-table">
<thead>
<tr>
<th>Id</th>
<th>Status</th>
<th>Owner</th>
<th>Created</th>
<th>Effort</th>
<th>Completion Date</th>
<th>Title</th>
</tr>
</thead>
<tbody>{issueRows}</tbody>
</table>
);
}
class IssueAdd extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
var form = document.forms.issueAdd;
console.log('form', document.forms);
this.props.createIssue({
owner: form.owner.value,
title: form.title.value,
status: 'New',
created: new Date()
});
//clear the form for the next input
form.owner.value = '';
form.title.value = '';
}
render() {
return (
<div>
<form name="issueAdd" onSubmit={this.handleSubmit}>
<input type="text" name="owner" placeholder="Owner" />
<input type="text" name="title" placeholder="Title" />
<button>Add</button>
</form>
</div>
);
}
}
class IssueList extends React.Component {
constructor(props) {
super(props);
this.state = { issues: [] };
this.createIssue = this.createIssue.bind(this);
}
componentDidMount() {
this.loadData();
}
loadData() {
fetch('/api/issues')
.then(response => response.json())
.then(data => {
console.log('Total count of records:', data._metadata.total_count);
data.records.forEach(issue => {
issue.created = new Date(issue.created);
if (issue.completionDate) issue.completionDate = new Date(issue.completionDate);
});
this.setState({ issues: data.records });
})
.catch(err => {
console.log(err);
});
}
createIssue(newIssue) {
fetch('/api/issues', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newIssue)
})
.then(response => {
if (response.ok) {
response.json().then(updatedIssue => {
updatedIssue.created = new Date(updatedIssue.created);
if (updatedIssue.completionDate) updatedIssue.completionDate = new Date(updatedIssue.completionDate);
const newIssues = this.state.issues.concat(updatedIssue);
this.setState({ issues: newIssues });
}); //**/
} else {
response.json().then(error => {
alert('Failed to add issue: ' + error.message);
});
}
})
.catch(err => {
alert('Error in sending data to server: ' + err.message);
});
}
render() {
return (
<div>
<h1>Issue Tracker</h1>
<IssueFilter />
<hr />
<IssueTable issues={this.state.issues} />
<hr />
<IssueAdd createIssue={this.createIssue} />
</div>
);
}
}
ReactDOM.render(<IssueList />, contentNode);
So in short all one has to do to leverage a function declared in a parent is the following....?
const contentNode = document.getElementById('contents');
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.props.someFunc; //So naming this prop someFunc will just help us identify this prop should get the function from the parent?
}
}
class Parent extends React.component{
constructor(props) {
super(props);
this.someFunc = this.someFunc.bind(this);
}
someFunc(){
....
}
render() {
return (
<div>
<ChildComponent someFunc={this.someFunc} /> // Parent's someFunc gets passed as a value to the ChildComponent's prop which is someFunc?
</div>
);
}
}
ReactDOM.render(<Parent />, contentNode);
Yes IssueTable and IssueAdd are in fact siblings from the code snippet you posted.
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.props.someFunc; //So naming this prop someFunc will just help us identify this prop should get the function from the parent?
}
}
In the above snippet this.props.someFunc will not serve any purpose, it will just return the function which you sent from ParentComponent but nothing will happen.
If you are planning to modify or change parent's state from an action in the ChildComponent then the below snippet might make more sense.
class ChildComponent extends React.Component {
constructor(props) {
super(props);
}
handleOnClick = (event) => {
// The name is someFunc because that is what you sent as props from the
// ParentComponent <ChildComponent someFunc={this.someFunc} />
// If it had been <ChildComponent callbackToParent={this.someFunc} />
// then you should access the function as this.props.callbackToParent
// and invoke as this.props.callbackToParent()
this.props.someFunc();
}
render() {
return (
<div onClick={this.handleOnClick}>
Click to trigger callback sent by parent
</div>
)
}
}
My app has an onClick that should be rendering more gifs. However, it does it once and then stops. Also, the onClick deletes all the gifs that were already on the page. Anyone know what I'm doing wrong?
class App extends Component {
constructor(props) {
super(props);
this.state = {
results: [],
};
}
componentDidMount() {
this.searchGifs('kittens');
}
searchGifs = (searchQuery) => {
fetch(`http://api.giphy.com/v1/gifs/search?q=${searchQuery}&limit=12&api_key=dc6zaTOxFJmzC`).then(data => data.json())
.then(response => {
this.setState({
results: response.data,
});
});
}
searchMoreGifs = (offsetQuery) => {
fetch(`http://api.giphy.com/v1/gifs/search?q=${offsetQuery}&limit=12&offset=${this.state.results.length}&api_key=dc6zaTOxFJmzC`).then(data => data.json())
.then(response => {
this.setState({
results: response.data,
});
});
}
render() {
return (
<main className="app">
<Header />
<SearchForm startSearch={this.searchGifs} />
<ResultList gifs={this.state.results} />
<LoadMore gifs={this.state.results} searchMore={this.searchMoreGifs} />
</main>
);
}
}
and here is the onClick:
class LoadMore extends React.Component {
render(props) {
return(
<button onClick={this.props.searchMore}>Load More</button>
);
}
}
export default LoadMore;
Each time you call this.setState({results: something}) you completely overwrite the previous state of results.You want to take the array that is in this.state.results and concat it with the new results.
class App extends Component {
constructor(props) {
super(props);
this.state = {
results: [],
// I also suggest moving the searchQuery to the state so it can be used in both the offset and the original search
searchQuery: 'kittens'
};
}
componentDidMount() {
this.searchGifs(this.state.searchQuery);
}
searchGifs = (searchQuery) => {
fetch(`http://api.giphy.com/v1/gifs/search?q=${searchQuery}&limit=12&api_key=dc6zaTOxFJmzC`).then(data => data.json())
.then(response => {
this.setState({
results: response.data,
});
});
}
searchMoreGifs = (offsetQuery) => {
fetch(`http://api.giphy.com/v1/gifs/search?q=${offsetQuery}&limit=12&offset=${this.state.results.length}&api_key=dc6zaTOxFJmzC`).then(data => data.json())
.then(response => {
this.setState({
// You were overwriting the old results with new data every time you ran this function
results: this.state.results.concat(response.data),
});
});
}
render() {
return (
<main className="app">
<Header />
<SearchForm startSearch={this.searchGifs} />
<ResultList gifs={this.state.results} />
{/* You also need to pass the offsetQuery to the LoadMore component so that the searchMore function can use it*/}
<LoadMore searchMore={this.searchMoreGifs} offsetQuery={this.state.searchQuery} />
</main>
);
}
}
class LoadMore extends React.Component {
render(props) {
const {offsetQuery, searchMore} = this.props
return (
<button onClick={() => searchMore(offsetQuery)}>Load More</button>
);
}
}
export default LoadMore;