React component for controlling widows for responsive line breaks in your text

ResponsiveWidows.js

import PropTypes from 'prop-types'
import React from 'react'

class ResponsiveWidows extends React.Component {
	constructor() {
        super()
        this.state = {}
    }

    componentDidMount() {
    	let numWidows = 0

		if (typeof(this.props.widows) == 'object') {
			const width = window.innerWidth
			for (let i=0; i<this.props.breakpoints.length; i++) {
				if (this.props.breakpoints[i] >= width) {
					numWidows = i == 0 ? this.props.widows[0] : this.props.widows[i-1]
					break;
				}
			}
			numWidows = numWidows === 0 ? this.props.widows[this.props.widows.length-1] : numWidows
		} else {
			numWidows = this.props.widows || 1
		}

		this.setState({widows:numWidows})
		console.log(this.props.widows[0])
		console.log('numWidows',numWidows)
    }
	
	render() {
		const words = this.props.children.split(' ')
		return <>{words.map((word, i) => word + (i > words.length-(this.state.widows+1) ? '\u00a0' :  ' ')).join('')}</>
	}
}

ResponsiveWidows.propTypes = {
	children: PropTypes.string.isRequired,
	widows: PropTypes.oneOfType([
		PropTypes.number,
		PropTypes.arrayOf(PropTypes.number),
	]).isRequired,
	breakpoints: PropTypes.arrayOf(PropTypes.number)
}

export default ResponsiveWidows