We Keep Coding

How do I add an accordian to a card in React Bootstrap?

I have a card and I want the text to be collapse-able. I know accordions can do that. For some reason it doesn't seem to work and I don't know why. Is this possible and if not is there a solution.
import Accordion from 'react-bootstrap/Accordion'
return (
<Card className="cardClass">
<Card.Img className="card-image" variant="top" src={movie.ImagePath} />
<Card.Body>
<Card.Title>{movie.Title}</Card.Title>
<Card.Text>{movie.Genre.Name}</Card.Text>
<Card.Text>
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Summary</Accordion.Header>
<Accordion.Body>
{movie.Description}
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Card.Text>
<div className="card-btns">
<Link to={`/movies/${movie._id}`}>
<Button className="movieCard-btn" variant="primary">View Movie</Button>
</Link>
<Button className="movieCard-btn" variant="primary" value={movie._id} onClick={(e) => this.addFavoriteMovie(movie)}>Add Favorite</Button>
</div>
</Card.Body>
</Card>
);
}

Forgot to download the latest version of React Bootstrap

Adding a button/icon to each row of a Semantic UI React dropdown

Related to this question How to add a button within a dropdown menu?
Working Codesandbox
I have a Semantic UI React Dropdown and I want to place a little, clickable, delete icon on each row of the dropdown, similar to this photo.
How can I do that?

you can do like this
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
<Dropdown.Item>
<Icon name='attention' className='right floated' />
Important
</Dropdown.Item>
<Dropdown.Item>
<Icon name='comment' className='right floated' />
Announcement
</Dropdown.Item>
<Dropdown.Item>
<Icon name='conversation' className='right floated' />
Discussion
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
if you have some dynamic data then simple map it
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
{
options.map(item => <Dropdown.Item>
<Icon name={item.icon} className='right floated' />
{item.name}
</Dropdown.Item>)
}
</Dropdown.Menu>
</Dropdown>

Ensure space between Cards on colapse to small screen in react

Am trying to make sure that when I view my react website on a small screen my cards have space in between them. Right now when I view on a large screen the cards are spaced evenly, however, on a small screen, they are not spaces. Has anyone encountered that issue?
Here is my code
<Row gutter={16} justify="space-between" align="middle">
{this.state.news.slice(0,4).map((item, key) => (
<Col span={12} md={{span:6}} lg={{span:6}} style={{paddingTop:15,marginTop:10}}>
<Card
hoverable
style={{ width: 230 }}
cover={<img alt="example" src={item.imageurl} />}
actions={[
<a href={item.url} target="_blank" > Read News</a>,
]}>
<div style={{fontSize:10,paddingRight:5}}>
<Meta title={item.title} description={item.categories} />
</div>
</Card>
</Col>
))}
</Row>
cards on a big screen
cards on a small screen

You have style={{ width: 100 }},This will keep the width fixed for all screen. take it out and try.
<Card
hoverable
// style={{ width: 100 }}
cover={<img alt="example" src={i.picture.large} />}
actions={[
<a href='#' target="_blank" > Read News</a>,
]}>
</Card>

Uppercase Button in nativebase

I have a button with face book icon
<Button iconLeft block > <Icon name='logo-facebook' /> <Text>Login with facebook</Text> </Button>
with text "Login with facebook" But it displays "LOGIN WITH FACEBOOK" .I am tried with capitalize={false} but no hope.Is there any way?
NB version:2.2.1

you are using Native Base Right ? maybe you can try this one.
you can change this code:
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>
to this :
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text uppercase={false}> {'Login with facebook'.toUpperCase()} </Text>
</Button>
just only using uppercase={false} in your <text> tag, hope it can help you :)

Try this :
text.capitalize-lowercase {text-transform: lowercase;}
text.capitalize-uppercase {text-transform: uppercase;}
<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-uppercase">Login with facebook</text> </button>
<br/> <br/>
<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-lowercase">Login with facebook</text> </button>

I think text transform currently not support by react native style.So you can try something like this
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>

I can't see five icons rendering in the footer using native base?

Hey guys I am trying to get five icon in the footer of the screen using native base but I can only see three icon can any body help me out what is the issue? I am referring to this link.
Here is the code.
<Container>
<Footer>
<Button transparent>
<Icon size={30} color={'#fff'} name={'ios-telephone'} />
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-cycle'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-home'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-menu'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'chatbox'}/>
</Button>
</Footer>
</Container>
Can any body help me out what is the issue? Thanks a lot in advance.

You are referring old version of NSP
Check the latest docs for same