CODEWITHSUNDEEP
reactjs
Champion
Champion

Reputation: 774

Callback function from child to parent component in React

I am trying to make a chat. But when I send a message I need to refresh page to get data on the page. I have to components Forms and SendMsg.

Parent:

...
import client from '../Utils/Contentful';

export default class Forms extends Component {
    constructor() {
        super()
        this.state = {
            messages: [],
        }
    } 

    componentDidMount(){
        client.getEntries({limit:300, order: 'sys.createdAt', content_type:'nameTest'}).then(response => {
            this.setState({messages: response.items});
        }).catch(e => {
          console.log(e);
        });
    }
render() {
        return (
            <div className="chat">
                <div className="container-xl">
                    <MessageList messages={this.state.messages}/>
                    <SendMsg />
                </div>
            </div>
        );
    }
}

And child component

...
import client from '../Utils/ContentfulCM';

export default class SendMsg extends Component {
    constructor() {
        super()
        this.state = {
            message:'',
            userEmail:'[email protected]',
            chatName:'ggg'
        }
        this.sendMessage = this.sendMessage.bind(this)
        this.handleChange = this.handleChange.bind(this)

    } 

    handleChange(e) {
        this.setState({
            message: e.target.value,
        })
    }

    sendMessage(e) {
        e.preventDefault();

        const form = e.target;
        const data = new FormData(form);

        client.getSpace(client.space)
        .then((space) => space.getEnvironment('master'))
        .then((environment) => environment.createEntry('nameTest', {
            fields: {
                chatName: {
                    'en-US': data.get('chatName')
                },
                //... some data
            }
        }))
        .then((entry) => entry.publish())
        .catch(console.error)

        this.setState({
            message: ''
        })
    }

    render() {
        return (
            <div className="send-message">
                <Form className="send-msg" onSubmit={this.sendMessage}>
                    <FormGroup>
                        <Input type="hidden" name="userEmail" value={this.state.userEmail}/>    
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="chatName" value={this.state.chatName}/>    
                    </FormGroup>

                    <FormGroup>
                        <Input 
                            type="text" 
                            name="text"
                            onChange={this.handleChange}
                            value={this.state.message}
                            placeholder="Write your message here"
                            required />
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="dateCreated" value={moment().format()} onChange={this.handleChange}/>    
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

I try to add props but not sure about right place for them Any suggestions?

Update 1

Both components have "import client" (they are different because have uniq accessToken), that's why I can't use them in one component.

Update 2

I've change question according to suggestion below, but still need to refresh page in order to get displayed data.

Parent:

export default class Forms extends Component {
    constructor() {
        super()
        this.state = {
            messages: [],
        }
        this.sendMessage = this.sendMessage.bind(this);
    } 

    componentDidMount(){
        client1.getEntries({limit:300, order: 'sys.createdAt', content_type:'nameTest'}).then(response => {
            this.setState({messages: response.items});
        }).catch(e => {
          console.log(e);
        });
    }
sendMessage(data) {
        client2.getSpace(client2.space)
        .then((space) => space.getEnvironment('master'))
        .then((environment) => environment.createEntry('nameTest', {
            fields: {
                chatName: {
                    'en-US': data.get('chatName')
                ... some data
            }
        }))
        .then((entry) => entry.publish())
        .catch(console.error)
    }
render() {
        return (
            <div className="chat">
                <div className="container-xl">
                    <MessageList messages={this.state.messages}/>
                    <SendMsg onSendMessage={this.sendMessage}/>
                </div>
            </div>
        );
    }
}

And child component


export default class SendMsg extends Component {
    constructor() {
        super()
        this.state = {
            message:'',
            userEmail:'[email protected]',
            chatName:'ggg'
        }
        this.sendMessage = this.sendMessage.bind(this)
        this.handleChange = this.handleChange.bind(this)

    } 

    handleChange(e) {
        this.setState({
            message: e.target.value,
        })
    }

    sendMessage(e) {
        e.preventDefault();

        const { onSendMessage } = this.props;

        const form = e.target;
        const data = new FormData(form);

        // if send message handler was passed, invoke with form data
        onSendMessage && onSendMessage(data);

        this.setState({
            message: ''
        })
    }

    render() {
        return (
            <div className="send-message">
                <Form className="send-msg" onSubmit={this.sendMessage}>
                    <FormGroup>
                        <Input type="hidden" name="userEmail" value={this.state.userEmail}/>    
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="chatName" value={this.state.chatName}/>    
                    </FormGroup>

                    <FormGroup>
                        <Input 
                            type="text" 
                            name="text"
                            onChange={this.handleChange}
                            value={this.state.message}
                            placeholder="Write your message here"
                            required />
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="dateCreated" value={moment().format()} onChange={this.handleChange}/>    
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

Upvotes: 0

Views: 1008

Answers (2)

Drew Reese
Drew Reese

Reputation: 202638

Define the callback in the parent. Split out the logic of sending the message data from extracting it from the form in the child. The parent's callback receives the message data and sends it, while the child component's function pulls the form data, formats it, calls the callback passed in props, and clears the input field.

parent

export default class Forms extends Component {
    constructor() {
        super()
        this.state = {
            messages: [],
        }
        this.sendMessage = this.sendMessage.bind(this);
    } 

    componentDidMount(){
        client.getEntries({limit:300, order: 'sys.createdAt', content_type:'nameTest'}).then(response => {
            this.setState({messages: response.items});
        }).catch(e => {
          console.log(e);
        });
    }

    sendMessage(data) {
        client.getSpace(client.space)
        .then((space) => space.getEnvironment('master'))
        .then((environment) => environment.createEntry('nameTest', {
            fields: {
                chatName: {
                    'en-US': data.get('chatName')
                },
                //... some data
            }
        }))
        .then((entry) => entry.publish())
        .catch(console.error);
    }

    render() {
        return (
            <div className="chat">
                <div className="container-xl">
                    <MessageList messages={this.state.messages}/>
                    <SendMsg onSendMessage={sendMessage} />
                </div>
            </div>
        );
    }
}

child

export default class SendMsg extends Component {
    constructor() {
        super()
        this.state = {
            message:'',
            userEmail:'[email protected]',
            chatName:'ggg'
        }
        this.sendMessage = this.sendMessage.bind(this)
        this.handleChange = this.handleChange.bind(this)

    } 

    handleChange(e) {
        this.setState({
            message: e.target.value,
        })
    }

    sendMessage(e) {
        e.preventDefault();

        const { onSendMessage } = this.props;

        const form = e.target;
        const data = new FormData(form);

        // if send message handler was passed, invoke with form data
        onSendMessage && onSendMessage(data);

        this.setState({
            message: ''
        });
    }

    render() {
        return (
            <div className="send-message">
                <Form className="send-msg" onSubmit={this.sendMessage}>
                    <FormGroup>
                        <Input type="hidden" name="userEmail" value={this.state.userEmail}/>    
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="chatName" value={this.state.chatName}/>    
                    </FormGroup>

                    <FormGroup>
                        <Input 
                            type="text" 
                            name="text"
                            onChange={this.handleChange}
                            value={this.state.message}
                            placeholder="Write your message here"
                            required />
                    </FormGroup>
                    <FormGroup>
                        <Input type="hidden" name="dateCreated" value={moment().format()} onChange={this.handleChange}/>    
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

UPDATE to include syncing capability

Sync API

Using the Sync API with Javascirpt

Updates to parent component:

  • Add a class instance timer variable to hold interval timer reference
  • Create functions to handle syncing data calls
  • Update componentDidMount to sync initial data when the component mounts, and setup data synchronization polling (since this isn't event driven)
  • Add timer cleanup in componentWillUnmount lifecycle function

Parent

constructor() {
  super()
  this.state = {
    messages: [],
  }
  this.syncTimer = null;

  this.sendMessage = this.sendMessage.bind(this);
}

initialSyncClient = () => client1.sync({
  initial: true
  limit:100,
  order: 'sys.createdAt',
  content_type: 'nameTest',
});

syncClient = () => {
  const { nextSyncToken } = this.state;
  client1.sync({
    nextSyncToken
  })
    .then(this.handleSyncResponse)
    .catch(e => {
      console.log(e);
    });
};

handleSyncResponse = ({ entries, nextSyncToken}) => {
  // response shape is a little different, 
  // response.entries vs. response.items, so need to access correctly
  // also need to save nextSyncToken for all subsequent syncs
  this.setState({
    messages: entries.items,
    nextSyncToken,
  });
};

componentDidMount(){
  // do initial sync
  this.initialSyncClient()
    .then(this.handleSyncResponse)
    .catch(e => {
      console.log(e);
    });

  // setup sync polling, 15 second interval
  this.syncTimer = setInterval(syncClient, 15 * 1000);
}

componentWillUnmount() {
  // clean up polling timer when component unmounts
  clearInterval(this.syncTimer);
}

NOTE: These changes based purely on the contentful documentation, so there may be need of some tweaking to get working as expected, or if you prefer not using arrow functions, etc...

Upvotes: 2

pawelek91
pawelek91

Reputation: 109

i don't see where you try to add function sendMessage to parent.

You can provide it by props, why not.

in child component, you can do something like this

interface IChildComponentWithSendMessage{
    sendMessage
}

export class ChildComponent extends React.Component<IChildComponentWithSendMessage>

and you can provide you messageMethod by props

also you don't have to do 

   this.sendMessage = this.sendMessage.bind(this)

also i thinkt that could be your problem why you can't provide this method to child/parent component

you can create functions like this:

sendMessage = () => {
}

Upvotes: 0

Related Questions