Q:

React dynamically create buttons based on number of results

I am working in a Spring application that uses react. Currently I have a json that contains several users based on certain criteria. The number of users can vary, but I would like to create several buttons for each user returned that links to the users profile. the url is just '/profile/username' 
format of json 
[{"user":{"principal":"cat@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"cat@sitter.com","zipcode":"98077","firstname":"cat","password":"abc123","sitterFlag":"true","ownerFlag":"false","lastname":"sitter","username":"catsitter","preferredPet":"Cat"},"momento":"cat@sitter.com"},"password":"$2a$10$ltnL.mFqo7hatj69Ls76xeegjhEX0D4At9m1rlBHbQtDrV8MdSeAS","momento":"cat@sitter.com"},{"user":{"principal":"test@pets.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"test@pets.com","zipcode":"98077","firstname":"test","password":"abc123","sitterFlag":"false","ownerFlag":"false","lastname":"pets","username":"testpets"},"momento":"test@pets.com"},"password":"$2a$10$wDhS6Mb8syhC0YIqgVG2qu8J6lA.1T.UprMYwAX6O7Xb3YMhgX3bO","momento":"test@pets.com"},{"user":{"principal":"test@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"test@sitter.com","zipCode":"98077","firstname":"test","password":"abc123","lastname":"sitter","username":"testsitter"},"momento":"test@sitter.com"},"password":"$2a$10$DuIeWFSzhtAjX3lr8xBNiu2kV9kAJ/PQ6pB/EzkB7FkGWfRbwxkzy","momento":"test@sitter.com"},{"user":{"principal":"sit@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"sit@sitter.com","zipCode":"98077","firstname":"sit","password":"abc123","lastname":"sitter","username":"imasitter"},"momento":"sit@sitter.com"},"password":"$2a$10$2NKOQkGZO/jUer3UjNGzdugUhkMV1pJ1eT8NQjSPRto9/cRdm56sO","momento":"sit@sitter.com"},{"user":{"principal":"a@sitter.com","schedule":null,"appointments":null,"roles":["ROLE_USER"],"attributes":{"principal":"a@sitter.com","zipCode":"98077","firstname":"a","password":"abc123","lastname":"sitter","username":"asitter"},"momento":"a@sitter.com"},"password":"$2a$10$8x1uVqR28x5rwNrydieSyu1ILifBJ5n0dUsZI5tJ6MoUWMqXxrmeq","momento":"a@sitter.com"}]

I currently have it working if I hard code for each user:
<div className="container padded">
    <div className="row">
        <div className="col-6 offset-md-3">
            <h2>Suggested Sitters</h2>
            <button onClick={() => this.suggestSitter(this.props.user.principal)}>Click</button>
            <hr/>
            <div>
                Sitters:
            </div>
            <Link to={this.setProfile(this.state.sitter ? this.state.sitter[1].user.attributes.username: ' ')} >
                <button type="button">{this.state.sitter ? this.state.sitter[1].user.attributes.username: ' '}</button>
            </Link>
        </div>
    </div>
</div>

the setProfile works like this:
setProfile(theUser) {
    return '/profile/' + theUser;
}

Clicking a button will redirect to that user's profile page.
So basically, instead of hardcoding n buttons, I would like to dynamically create n buttons and each will link to '/profile/username/ for each user returned.
suggestSitter function:
suggestSitter(user){
        var _this = this;
        console.log('user', user);
        axios.get('/api/user/suggest_sitter', { params: { principal: user } })
            .then(function(response) {
                console.log('Response: ' + JSON.stringify(response));
                _this.setState({
                    sitter: response
                });
            })
            .catch(function (e) {
                console.log('Error: ' + e);
            });
    }

A:

You can map the data to an array of Link (provide an unique key for it too):
{this.state.sitter.map((e) => (
  <Link key={e.someUniqueProperty} to={this.setProfile(e.user.attributes.username)}>
    <button type="button">{e.user.attributes.username}</button>
  </Link>
))}

