Q:

React: Reuse Success Box in DRY approach

I feel like I am repeating too much code and would appreciate it if somebody could help me to understand React a little better with regard to components.
I have a success box which I want to use within multiple components. It looks like this:
class SuccessAlert extends React.Component {

    constructor(props) {
        super(props);
    }

    close = () => {
        this.props.close();
    }

    render() {

        const data = this.props.data;
        const title = data.title;
        const content = data.content;

        return (
            <div>
                {data.show ?
                    <div className="shadow">
                    <div className="success-wrapper">
                        <div className="success-header">
                            <img src={process.env.PUBLIC_URL + '/pictures/success.png'} /> 
                            <h3>{title}</h3>
                        </div>
                        <div className="success-content">
                            {content}
                        </div>
                        <p onClick={this.close} className="success-okay">
                            Okay
                        </p>
                    </div>
                </div>
                : null
                }
            </div>
        )
    }
}

export default SuccessAlert;

I then use it in a component like this:
 createSuccessMessage = (title, content) => {
        this.setState({
            successMessage: {
                show: true,
                title: title,
                content: content
            }
        })
    }

  closeSuccessMessage = () => {
      this.setState({
          successMessage: {
              show: false,
          }
      })
  }

  render() {
     return ( 
        <div className="App">

            <SuccessAlert 
               close={this.closeSuccessMessage}
               data={this.state.successMessage}
            />

   ....

As you can see I pass the close function and the data in. However if I wanted to use this box in another componenet I would have to put those methods in again.
Is there a better (don't repeat yourself) way of doing this? Appreciate it!

A:

Does your SuccessMessage Component is an independent component where u can use it or inject it into any component? i think you can do it with HoC
export default (titleParam, contentParam) => WrappedComponent => {
    class NewComponent extends React.Component {
        constructor(props) {
             super(props)
             this.state = {
                 show: false,
                 title: titleParam,
                 content: contentparam
             }
        }
        setMessage = (field, message) => {
             this.setState({ [field]: message })
        }
        closeSuccessMessage = () => {
            this.setState({
               show: false
            })
        }
        openSuccessMessage= () => {
            this.setState({
               show: true
            })
        }

        render() {
            const { title, content, show } = this.state
            return (
                 <Fragment>
                      <WrappedComponent openSuccessMessage={this.openSuccessMessage} {...props}
                      <SuccessAlert 
                        setMessage={this.setMessage}
                        close={this.closeSuccessMessage}
                        data={{ show, title, content }}
                    />
                 </Fragment>
            )
       }
  }
  return NewComponent
}

and use it like
import withMessage from './path/to/hoc'
const App = props => {
    const { openSuccessMessage } = props
    const handleClick = () => openSuccessMessage()

    return (
        ... //your code
    )
}

export default withMessage('title', 'content')(App)

