React: props not passing correct in React

user_12537438 0
Viewed 99

I was trying to pass response message back from server and displayed it in the UI, but seems whenever the response I passed in the second <Dialog>, the response is undefined, I think response is only defined in the handle submit function.

Is there a way that I can pass the response into the <Dialog>?

const AppNav = () => {
    //...
    const [popupOpen, setPopupOpen] = useState(false);
    const [secondPopupOpen, setSecondPopupOpen] = useState(false);
    const [input, setInput] = useState('');

const renderContent = () => { 
  return ( 
    <form>
     <input
      type="text"
      onChange={e => setInput(e.target.value)}
      value={input}
      onBlur={() =>delay(() =>setInput(''),150}
      placeholder='placeholder here...'
     />
    </form>
  );
};

const renderAction = () => { 
  const handleSubmit = async() => {
    //some server calls here
    //response is what got back from server call
  const response = await service.send(request)
  try{
    if(response.result ==='success'){
      setPopupOpen(false);
      setSecondPopupOpen(true);
     }else { throw new Error()}
    }
  catch (err) {throw new Error()}
  return response;
  }
  return ( 
    <Button onClick={handleSubmit}>Submit</Button>
  );
};
  //...
  return (
   <Button onClick={() => setPopupOpen(true)}>open button</Button>
   <Dialog
     open={popupOpen}
     renderContent={renderContent}
     renderAction={renderAction}
   />
   <Dialog
     open={secondPopupOpen}
     renderContent={(response) => <span><>{response.resultMessage}</span>}
     renderAction={() => {}}
   />
  )
}

Dialog.js

const Dialog = props => {
 const { renderAction, renderContent, renderTitle} = props;
 return (
  render={
   ({getTitleProps, getContentProps, getActionProps}) => (
     <DialogTitle {...getTitleProps()}>
      {renderTitle ? renderTitle() : <span>Title</span>}
     </DialogTitle>
     <DialogContent {...getContentProps()}>
      {renderContent ? renderContent() : <span>Content</span>}
     </DialogContent>
     <DialogAction {...getActionProps()}>
      {renderAction ? renderAction() : <span>Action</span>}
     </DialogAction>
   )
  }
 )
}
react-hooks reactjs dom javascript
1 Answers

I think you should refactor renderAction function and store the state of request somewhere as well as error ( or combine them into one state ).

const [response, setResponse] = useState(null);
const [error, setError] = useState(null);

const handleSubmit = async() => {
  const response = await service.send(request)
  try {
    if(response.result ==='success'){
      setPopupOpen(false);
      setSecondPopupOpen(true);
      setResponse(response);
      return;
    }

    setError(new Error('error'));
  }
  catch (error) {
    setError(error);
  }
}

const renderAction = () => {
  if(response) {
    return response;
  }

  if(error) {
    return error.message // to-do
  }

  return <Button onClick={handleSubmit}>Submit</Button>
};
user_23044740
Related