const { setSelectedProjectId, selectedProjectId, boards, onChangeShowEditBoardDialog, createBoardStatus, componentOwnerId } = props; const BoardList = styled.div` justify-content: center; width: 100%; height: 100%; padding: 10px; overflow-y: scroll; `; const [ hoverId, setHoverId ] = useState( -1 ); return ( <BoardList> { ( boards || [] ) .map( ( board ) => { const boardStatus = props.createBoardStatus.find( b => b.name === board[ 1 ] ); return ( <Widget key={ board[ 0 ] } src={ `${ componentOwnerId }/widget/Calimero.TaskChain.SideMenu.BoardItem` } props={ { id: board[ 0 ], name: board[ 1 ], onClick: () => { if ( !board[ 0 ] || !( boardStatus === "Saving..." && boardsStatus === "Error saving" ) ) { setSelectedProjectId( board[ 0 ] ); } }, onMouseEnter: () => setHoverId( board[ 0 ] ), onMouseLeave: () => setHoverId( -1 ), onSettingsClick: () => { if ( !( boardStatus === "Saving..." || boardsStatus === "Error saving" ) ) { onChangeShowEditBoardDialog( true, board[ 0 ], board[ 1 ] ); } }, hoverId, selectedProjectId, boardStatus, componentOwnerId } } /> ); } ) } </BoardList> );